[Vue.js] Axios Interceptor 적용

1. axios란

 

https://axios-http.com/kr/docs/intro

 

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.

서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고,

클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

 

2. Interceptor 적용

 

axios 를 통해 get,post 등 XMLHttpRequest 작업을 수행하다 보면, 

HttpRequest 요청 전 후 처리에 대해 자동적으로 수행을 해줘야할 필요성이 있습니다.

그때, 사용하는 것이 interceptor 인데요.

vue.js 의 axios에서 interceptor를 적용하는법을 알아보도록 하겠습니다.

 

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 로직
    // ...
    
    return config;
  },
  function (err) {
  	// 오류를 리턴 해주기 전에 수행할 로직
    
    return Promise.reject(err);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 이후 수행할 로직 ex) 데이터 가공 등
    // ...
    
    return response;
  },
  function (err) {
    // 오류를 리턴 해주기 전에 수행할 로직
    
    return Promise.reject(err);
  });

 

위와 같이 axios를 main.js 에서 호출 후 전역으로 적용할 수도 있으며,

아래와 같이 instance 를 별도로 생성하여, 해당 instance에만 적용시켜서 사용할 수도 있습니다.

 

let apiInstance = axios.create();