Axios Interceptor 사용법

Interceptor는 Axios의 기능 중 하나이다.

✔️Axios란?
Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리로, 비동기로 HTTP 통신을 할 수 있으며, return을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

이름 그대로 request/response 이벤트를 intercept하는데, request 시에는 server로 요청보내기 바로 전의 정보를 intercept하며, response는 서버에서 요청받아온 데이터를 front로 return하기 전에 intercept한다.

// interceptor.js 에서 interceptor 설정
import axios from "axios";

// 인스턴스를 생성하고, 인터셉터 설정 로직까지 완료된 후에 새로운 인스턴스를 리턴하는 로직을 
// 하나의 함수로 만들고, createInstance()의 리턴 값(인스턴스)을 이용해서 api를 요청한다.
export function createInstance() {
	const instance = axios.create();
	return setInterceptors(instance);
}

// 인자로 axios instance를 전달받고, 인터셉터 설정 로직을 실행한 후에 
// 인스턴스를 다시 리턴해주는 함수
function setInterceptors(instance) {
	instance.interceptors.request.use(
		function(config) {
			// 요청을 보내기 전에 실행
			// JWT를 통해 사용자 인증을 할 경우, header에 토큰 값을 넣어야 하는데, 이를
			// interceptor와 config를 이용해 request 전에 실행해 값을 넣을 수 있다.
			if(Cookie.getCookie('user_token') != null){
				config.headers.Authorization = "Bearer " + Cookie.getCookie('user_token');
			}else{
				alert('세션이 만료되었습니다. 계속하려면 다시 로그인 하세요!');
				localStorage.removeItem('vuex');
				router.push({name: 'login'});
			}
			return config;
		},
		function(error) {
			// 요청 에러난 경우 실행
			return Promise.reject(error);
		},
	);

	instance.interceptors.response.use(
		function(response) {
			// 200대의 응답 데이터를 이용해 실행
			return response;
		},
		function(error) {
			// 200대 이외의 응답 에러난 경우 실행
			// error.response.data 를 이용하면, 백엔드에서 넘어온 메세지를 사용할 수 있다.
			alert(`[ERROR] ${error.response.data.message} 다시 시도해주세요!`)
			return Promise.reject(error);
		},
	);

	return instance;
}

그리고 API에서 Interceptor를 불러와서 사용한다.

//SchedulerApi.js
import { createInstance } from "./Interceptors";

// inteceptor에서 설정한 함수를 불러와 인스턴스에 담는다.
const instance = createInstance();

class SchedulerApi{
    URL = '/api/scheduler'

    scheduleList(){
				// axios.get이 아닌 instance.get을 사용해 interceptor를 사용한다.
        return instance.get(this.URL + '/jobs')
                .then((response)=>response.data);
    }

    scheduleDetail(id){
        return instance.get(this.URL + `/jobs/${id}`)
                .then((response)=>response.data);
    }
   
}

export default new SchedulerApi();