본문 바로가기

카테고리 없음

fetch를 이용한 Vue ajax call 코드

728x90

개요

Vue를 이용한 버튼을 클릭 하면 api server에 사용자의 요청을 전송하여 api에서 return받은 값을 화면에 출력 해주는 기능입니다.

웹에 배포 해놓았고 사이트는 아래 주소에 가시면 있습니다.

Site : bible-finder-vue.s3-website-ap-northeast-1.amazonaws.com/

Git Repo : github.com/Kyeongrok/bible_finder_ui_vue

index.js

var app5 = new Vue({
  el: '#app-5',
  data: {
    input: '롬5:1',
    history:[],
    message: '이곳에 결과가 나옵니다.'
  },
  methods: {
    callApi: function () {
        const input = this.input
        fetch('https://2kstde4150.execute-api.ap-northeast-1.amazonaws.com/dev/v1/find/single/'+input)
        .then(res => {
            return res.json()
        }).then(data => {
            console.log(data)
            this.history.push({'text':data[0]['text'], 'index':data[0]['index']})
        })
    }
  }
})

기능

1.사용자가 입력한 input 변수의 값을 받음

2.사용자가 입력한 값으로 2kstde4150.execute-api.ap-northeast-1.amazonaws.com/dev/v1/find/single/를 호출함

3.API에서 return해준 값을 history에 push함

 

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app-5">
            <h2>이곳에 값이 출력 됩니다.</h2>
            <p v-for="result in history">{{result.index}}{{result.text}}</p>
            <input v-model="input"/>
            <button v-on:click="callApi">검색</button> 1초후에 결과가 나옵니다.
        </div>

        <script src="index.js" async defer></script>
    </body>
</html>

기능

1.button을 click하면 callApi함수를 호출함

2.callApi에서 만든 history에 있는 값을 loop돌며 화면에 출력함

728x90
블로그 주인장입니다. 원하시는 정보는 얻으셨나요? 이 포스트에서 추가로 필요한 정보가 있으시면 여기에 남겨주세요.