[Vue.js] Vue Axios 적용해보기

- Axios는 Ajax 처럼, 서버와 비동기 통신을 해주는 라이브러리이다.

- 현재 정식 버전이 릴리즈 되지 않았으나, 인기가 좋음.

- 특징으로 요청 취소와 TypeScript를 지원하는 것이다.

- Promise API를 활용한다.

 

1. axios와 vue-axios 설치

npm install --save axios vue-axios

 

2. import

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(Vuex);
Vue.use(VueAxios, axios);

 

3. 사용 방법

아래와 같이 get/post/delete 등의 헤더를 붙여 서버와 통신한다.

 axios.get(`${api_url}`)
             .then(res => res.data)
             .then(items => (context.commit('setPosts', items)))
             .catch(error => console.error(error));