[vue 2 기초] Axios (액시오스)

Axios(액시오스)는 뷰에서 권고하고 있는 HTTP 통신 라이브러리 이고

Promise 기반이다.

 

*Promise : 자바스크립트 비동기 처리 패턴

 

HTTP 통신 라이브러리인 Axios를 알아보기 전에 간단하게 HTTP 통신 구조를 알아보려한다.

1. HTTP 통신 구조 (클라이언트 <-> 서버)

브라우저 (클라이언트)와 서버에서 HTTP 통신 방법을 간단하게 정리하자면

1. 브라우저(클라이언트)에서 HTTP Requset를 통해 서버의 특정 백엔드 로직을 실행하고
2. 백엔드 로직을 통해 DB에서 로직에 맞는 데이터를 가져온다.
3. 가져온 데이터를 또 다시 특정 백엔드 로직을 통해 HTTP Response로 브라우저(클라이언트)에 응답을 한다.
4. HTTP Response를 통해 가져온 데이터를 브라우저에 뿌려준다.

위와 같이 HTTP 통신 구조를 간략하게 정리할 수 있다.

 

2. Axios 적용

CDN 방식 or NPM 방식으로 axios 라이브러리를 설치한 뒤에

<div id="app">
    <button v-on:click="getData">get user</button><!-- 버튼 클릭시 vue 인스턴스에 저장해놓은 getData 메소드를 호출한다. -->
    <div> {{ users }} </div>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            users: []
        },
        methods: {
            getData: function(){
                var vm = this;
                axios.get('https://jsonplaceholder.typicode.com/users/')    // https://jsonplaceholder.typicode.com/users/ 에서 데이터 받아오기
                    .then(function(response){
                        console.log(response.data);     // response에서 data 속성 값 출력
                        // this.users = response.data;  // 함수 안에 this로 해당 this는 vue 인스턴스에 대한 this가 window를 가르킨다.
                        vm = response.data;             // getData 함수 내부에 this를 따로 변수에 담아서 사용
                    }.catch(function(){
                        console.log(error);
                    });
            }
        }
    });
</script>

 

vue 인스턴스 methods에 axios를 사용하기 위한 함수를 등록해준다.

axios.get() : 데이터 가져오기

axios.then() : 비동기 통신이 성공했을 경우 처리

axios.catch() : 통신시 오류가 발생했을 때의 처리

 

위의 소스와 같이 작성할 때 주의해야 할 점은 vue 인스턴스 내부에 있는 데이터에 접근하기 위해 this를 사용하게 되는데

함수 내에서 this를 사용하게되면 함수 내부에서 this를 가르키게 되어 this는 윈도우를 가르키게 된다.

 

그렇게 때문에 getData 메소드 내부에 this를 별도 변수에 담아서 사용하거나

then에서 function(){} 이 아닌 => 화살표 함수 방식으로 작성하여 this가 원하는 방향으로 지정되도록 처리할 필요가 있다.

 

 

---

출처

인프런 'Vue.js 시작하기 - Age of Vue.js' 강좌