[Axios] axios interceptors 사용해보자

interceptors란

API 요청과 응답을 가로채는 것을 말한다. 

 

사용하는 이유

1. API통신에서 공통적으로 전, 후처리가 필요할 때
2. token이 만료되었을 때를 감지하고 처리하기 위해서
3. 에러가 발생했을 때 aleart창 띄어주기

일단 내가 사용하는 이유는 위와 같다.

 

위에서 언급한 것과 같이 axios를 사용할 때 interceptors를 사용하게 된다면

모든 API 통신은 interceptors를 거치기 때문에 공통적인 작업을 처리하기가 좋다.

 

사용법

// 요청 interceptors
instance.interceptors.request.use(
  function (config) {
    // 요청하기전에 필요한 작업
    return config;
  },
  function (error) {
    // 요청에 오류가 있을 때 필요한 작업
    return Promise.reject(error);
  },
);

// 응답 interceptors
instance.interceptors.response.use(
  function (response) {
    // 응답 후에 필요한 작업
    return Promise.reject(response);
  },
  function (error) {
    // 응답에 오류가 있을 때 필요한 작업
    return Promise.reject(error);
  },
);

 

내가 주로 사용한 방법

// 요청 interceptors
instance.interceptors.request.use(
  function (config) {
    // 주로 token의 관련된 작업을 했다.
    // headers에 공통적으로 필요한 값을 추가
    return config;
  },
  function (error) {
    return Promise.reject(error);
  },
);

// 응답 interceptors
instance.interceptors.response.use(
  function (response) {
    return Promise.reject(response);
  },
  function (error) {
    // API 요청 후 토큰 관련된 에러가 있을 때
    // 토큰 관련 에러 코드를 확인 후
    // access Token이 만료, refresh Token으로 access Token 재발급
    // refresh Token이 만료되었을 때 로그인 페이지로 이동
    return Promise.reject(error);
  },
);