Axios Interceptor

interceptor

인터셉터는 req와 res에 대한 then이나 catch가 실행되기 전, middleware와 같이 콜백함수를 실행할 수 있는 기능이다.

import axios from 'axios';
import URL from './constant';

const instance = axios.create({
  baseURL: URL,
});

/* ReqSetting */
const reqFulfilled = (config: any) => {
  console.log(config);
  return config;
};

const reqRejected = (error: any) => {
  console.log(error);
  return Promise.reject(error);
};

instance.interceptors.request.use(reqFulfilled, reqRejected);

/* ResSetting */
const resFulfilled = (res: any) => {
  console.log(res);
  return res;
};

const resRejected = (error: any) => {
  console.log(error);
  return Promise.reject(error);
};

instance.interceptors.response.use(resFulfilled, resRejected);

export default instance;

서버의 부하를 줄이기 위해, HTTP요청 전 session을 확인하는 로직 등은 사실 컴포넌트 내부에 존재해도 큰 문제자체는 없다. 하지만 코드의 확장성이나 유지보수 측면을 생각해 보았을 때, 컴포넌트로부터 유효성 검사 로직을 분리하고, 이를 axios에 온전히 위임한다면, 더욱 나은 코드가 될 것이다.