[Vue.js] 15. Ajax

ajax 요청 방법 두가지

1. axios 라이브러리 사용
2. 기본 fetch 함수 사용

 

 

> axios 라이브러리 사용

 

• 라이브러리 설치하기

npm install axios

 

• 사용하기

// post 요청
axios.post('URL', {name: 'kim'})
    .then((결과) => {
        console.log(결과)
    })
    .catch((에러) => {
        console.log(에러)
    });
    
// get 요청
axios.get('URL')
    .then((결과) => {
        console.log(결과)
    })
    .catch((에러) => {
        console.log(에러)
    });

 

ex) 더보기 클릭시 데이터 받아오기

<template>
    <button @click="more">더보기</button>
</template>

<script>
import postData from './data/postData';
import axios from 'axios';

export default {
    name: 'App',
    data() {
        return {
            postData: postData,
            moreCount: 0,
        };
    },
    methods: {
        more() {
            axios
                .get(`https://codingapple1.github.io/vue/more${this.moreCount}.json`)
                .then((res) => {
                    console.log(res);
                    this.postData.push(res.data);
                    this.moreCount++;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
    components: { Container },
};
</script>