axios interceptor에 대해 알아보자

나는 이때까지 프로젝트를 진행하면서 axios를 이용하여 baseURL만 설정하였다.

import axios from 'axios';

const Axios = axios.create({
  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
});

export default Axios;

위와같이, baseURL만 환경변수를 이용해서 받아왔다.

하지만, 공부를 진행하다보니, axios에서 request,response의 성공 실패에 따라 해당 부분에서 설정할 수 있는 것을 알게되었다.

interceptors가 무엇일까?

interceptors는 요청하기 직전과, then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다.

1. instance
2. request 설정
3. response 설정

requuest와 response는 2개의 콜백함수를 받을 수 있다.

성공했을때와, 실패했을 때인 response와 error로 나뉠 수 있다.

/**
 * Request 실패 handler
 */
const requestErrorHandler = err => {
  return Promise.reject(err);
};

/**
 * Response 성공 handler
 */
const responseSuccessHandler = res => {
  const response: DefaultResponse = res.data;

  if (200 <= res.status && res.status < 300) {
    return response;
  } else {
    return responseErrorHandler(res);
  }
};

/**
 * Response 실패 handler
 * @param err 에러 객체
 */
const responseErrorHandler = err => {
  return Promise.reject(err);
};

/**
 * Axios 객체
 */
const request = axios.create({
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

/**
 * Axios Request 미들웨어
 */
request.interceptors.request.use(
  config => requestSuccessHandler(config),
  err => requestErrorHandler(err),
);

/**
 * Axios Response 미들웨어
 */
request.interceptors.response.use(
  res => responseSuccessHandler(res) as any,
  err => responseErrorHandler(err),
);

참고문서

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