HTTP 통신 라이브러리 - axios

jQuery의 ajax를 많이 사용했는데 vue에서는 axios를 대부분 많이 사용한다고 한다.

근데 왜 사용하냐 ?  

Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하단다.

 

 

axios 사용법

 

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

 

        new Vue({
            el : '#app' ,
            data : {
                users : []
            },
            methods : {
                //axios를 처리하기 전의 this와 처리후의 this는 의미가 다르다!
                getData : function() {
                    var vm = this;
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                    .then(function(response){
                        vm.users = response.data;
                        //비동기 처리를 했을때 자연스럽게 실행 컨텍스트가 변경되면서 this의 내용 변경
                    })
                    .catch(function(error){
                        console.log(error);
                        
                    })
                }
            }
        })

 

 

get user 버튼을 클릭시 데이터를 요청해 vue 인스턴스 data users에 값을 저장해 놓고 출력한다!