Axios

Axios 액시오스

• 뷰에서 권고하는 HTTP 통신 라이브러리
• Promise 기반의 HTTP 통신 라이브러리

※ Promise 란?

    - 자바스크립트에서 비동기 처리에 사용되는 객체

※ 비동기 처리란?

    - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성

 

 

액시오스 설치 CDN

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>

 

 

액시오스 정의하기

• get으로 정보 받기
• 성공하면 then으로 처리
• 실패하면 catch로 처리

new Vue({
    el: '#app',
    methods: {
        getData: function() {
            axios.get('https://jsonplaceholder.typicode.com/users/') // get으로 유저정보 받아옴
            .then(function(response) { // 성공시 then으로 진입
                console.log(response.data);
            })
            .catch(function(error) { // 실패 시 catch로 진입
                console.log(error);
            });
        }
    }
})

 

 

axios로 받은 정보 뿌리기

• 버튼 클릭 시 메소드 getData 실행

<div id="app">
    <button v-on:click="getData">get user</button>
    <div>
        {{ users }}
    </div>
</div>

 

• data 속성에 정보를 넣을 빈 배열 users 만들기
• getData에 this의 data에 받아온 정보 넣음 --- this는 해당 인스턴스를 가리킴

new Vue({
    el: '#app',
    data: {
        users: []
    },
    methods: {
        getData: function() {
            console.log(this);
            var vm = this;
            axios.get('https://jsonplaceholder.typicode.com/users/') // 유저정보 받아옴
            .then(function(response) { // 성공시 then으로 진입
                console.log(response.data);
                vm.users = response.data;
                console.log(vm);
            })
            .catch(function(error) { // 실패 시 catch로 진입
                console.log(error);
            });
        }
    }
})