티스토리 뷰

카테고리 없음

fetch를 이용한 Vue ajax call 코드

KyeongRok Kim 2021. 2. 28. 13:19

개요

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

 

prerequisite

API에 Cors설정이 되어 있어야 합니다.

참고 https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

 

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돌며 화면에 출력함

 

 

SingleFile

API호출시 API에서 Cors허용 해주어야 합니다.

<!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 @click="callApi">검색</button> 1초후에 결과가 나옵니다.
</div>

<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            input: 'parameter를 입력 하세요',
            history:[],
            message: '이곳에 결과가 나옵니다.'
        },
        methods: {
            callApi: function () {
                const input = this.input
                fetch('http://localhost:8080/api/v1/reviews/1')
                    .then(res => {
                        console.log(res)
                        return res.json()
                    }).then(data => {
                    console.log(data)
                    // this.history.push({'text':data[0]['text'], 'index':data[0]['index']})
                })
            }
        }
    })
</script>
</body>
</html>
728x90
저작자표시
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함