Axios (엑시오스)

#vue #vue기초

Axios는 jQuery의 Ajax와 같은 기능을 하는 HTTP 통신 라이브러리입니다.
Vue 리소스도 있지만 Axios를 가장 많이 사용합니다.

Axios 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Axios</title>
</head>
<body>
    <div id="app">
        <button v-on:click="getData">목록 가져오기</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.15/dist/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <script>
        new Vue({
            el : '#app',
            methods : {
                getData : function () {
                    axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function () {
                        console.log(response);
                    });
                }
            }
        })
        Vue.config.devtools = true;
    </script>
</body>
</script>
</body>
</html>

Axios의 데이터는 객체 형태로 리턴되므로 JSON.parse()를 사용할 필요가 없습니다.