[Vue.js] Axios 설치 및 사용(전역 설정, 인터셉터 설정 )

* Axios란,

 브라우저, Node.js를 위한 Promise를 활용하는 HTTP 비동기 통신 라이브러리이다. 한 마디로 Axios는 Ajax처럼 백엔드와 프론트엔드 의 통신을 위해 사용되는 비동기 통신 방법이라고 생각하면 된다.

( Promise = 비동기 로직을 처리하기에 유용한 JS 객체를 말함 )

 

* Vue.js에 Axios 설치 및 사용하기

 

 1. Axios 설치

npm i axios //axios 설치

 

2-1. Axios 기본으로 사용

 

 통신방법은 Ajax와 마찬가지로 GET, POST, PUT,DELETE를  사용할 수 있다.

<script>
import Axios from 'axios';  --- Axios 주입

export default {
  name: "examplePage",
  methods : {
    getPage(){
      return Axios
            .get(`/login`)  --- 요청보낼 URL(GET,POST,PUT,DELETE 사용)
            .then ( response => { 
              	// 성공적으로 응답을 받는 경우
            }).catch(error){ 
            	// 응답받기에 실패한 경우
            	console.log(error);
            }
    }
  }
}
</script>

 

then => 응답이 올바르게 내려온 경우 반환값(response)에 대한 로직 작성

catch => 응답오류가 생긴 경우 발생한 요류에 대한 로직 작성

 

2-3 Axios 전역으로 설정하기

 

Axios를 전역적으로 사용하고 싶을 때는 컴포넌트별로 전부 import 해줄 필요 없이 main.js에 주입시켜주면 된다.

 

- main.js

import Vue from 'vue'
import App from './App.vue'
import Axios from 'axios';
import router from '@/routes/router';

/* Axios 전역설정 */
Vue.prototype.$axios = Axios;

new Vue({
  render: h => h(App),
  router,   // 전역적으로 router 를 사용하겠다고 정의
}).$mount('#app')

 

- loginPage.vue

<script>
export default {
  name: "examplePage",
  methods : {
    getPage(){
      return this.$axios  // 주입시킬 필요없이 this를 사용
                  .get(`/login`)  // 요청보낼 URL(GET,POST,PUT,DELETE 사용)
                  .then ( response => { 
                      // 성공적으로 응답을 받는 경우
                  }).catch(error){ 
                      // 응답받기에 실패한 경우
                      console.log(error);
                  }
    }
  }
}
</script>

 

전역적으로 설정해 둔 Axios는 위의 코드처럼 this.$axios로 호출하여 사용할 수 있다.

 

 

2-4 Axios 인스턴스 만들어서 사용하기

 

Axios를 모듈화 하고 싶은 시점이 생긴다.

예를들면, 매 요청마다 동일한 header값을 세팅해야 할 때, 동일한 baseURL로 요청하고 싶을 때 등 인데

이럴 때는 Axios를 모듈화 하여 인터셉터로 활용한다.

 

import Axios from "axios";
import {store} from "@/store/store";

// 1. 기본 설정 추가
const AxiosInst = Axios.create({
    baseURL : 'http://localhost:8080'   // baseURL 추가
})

// 2. 모든 요청을 intercept 해서 header값 설정(토큰)
// : Axios request일때 이 설정값을 사용한다는 것
AxiosInst.interceptors.request.use( 
    (config) => {
        let access_token = store.getters.getToken;
        if(access_token){
            config.headers.Authorization = `${access_token}`;
        }
        return config;
    }
)
export default AxiosInst;

 

위의 코드에서는 기본적으로 AxiosInst의 기본 설정값과 

AxiosInst로 Request 할 때 인터셉트 해서 넣어주고 싶은 설정값을 세팅한 것이다.

 

이렇게 인터셉트를 설정하고 사용하고자 하는 vue에서

해당 AxiosInst를 주입받아 사용하면 request를 보낼 때만 헤더값에 Authrozation값이 설정되고

baseURL은 해당 URL로 설정된다.