Axios 인터셉터 사용법

플젝 하면서  멘토님이 Interceptor를 사용하는 방법이 있다고 플젝 끝날 때즘 알려주셨고.. 이미 짠코드를 걷어내기가 힘들것 같아서
플젝 끝나고 코드를 걷어내볼려고  공부하려고 한다

Axios는 HTTP 요청과 응답을 가로채는 Interceptor를 지원한다 

Axios 인스턴스는 요청과 응답에 대해 각각 Interceptor 관리자를 가지고 있고, 이 관리자들은 요청이나 응답을 가로챌 때 실행할 핸들러를 관리한다

=> Axios 인스턴스가 ‘요청을 보내기 직전’과 ‘응답을 받은 직후’에 미리 등록한 핸들러들을 차례로 실행한다

 

언제 사용할까?

• API 요청마다 해줘야 하는 반복적인 작업이 있을 때(예: 헤더에 토큰 싣기)
• 에러 관리를 한 곳에서 하고 싶을 때

 

Request Interceptor

요청에 대한 Interceptor는 요청을 보내기 직전에 가로챈다 

onFulfilled 핸들러에서 무언가 에러가 발생하면 onRejected 핸들러가 실행되고 onRejected 핸들러가 실행되는 순간 요청은 이루어지지 않고 즉시 종료된다

axios.interceptor.request.use(onFulfilled, onRejected)

Response Interceptor

axios.interceptor.response.use(onFulfilled, onRejected)

응답에 대한 Interceptor는 상대 서버로부터 응답이 돌아온 직후에 가로챈다

응답이 성공적으로 돌아온다면 onFulfilled 핸들러를 통해 공통 처리를 진행할 수 있지만 만약 어떤 서버로 보낸 요청이 실패하여 돌아온다면 onRejected 핸들러가 동작하게 된다

 

axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

// request를 interceptor 하기
instance.interceptors.request.use(
  config => {
    /** config에는 위의instance 객체를 이용하여 request를 보냈을떄의 모든 설정값들이 들어있다.
     * [활용]
     * 1. api요청의 경우 token이 필요한 경우가 있는데, 필요에 따른 토큰 정보들을 여기서 처리할 경우
     * 토큰에 대한 정보를 여러곳에서 처리하지 않아도 된다.
     * 2. 요청 method에 따른 외부로 드러내지 않고 처리하고 싶은 부분에 대한 작업이 가능
     */
    return config;
  },
  err => {
    /** request 요청을 보낼때 error가 발생하는 경우 여기서 catch가 가능하다.
     */
    return Promise.reject(err);
  },
);
// response를 interceptor 하기
instance.interceptors.response.use(
  config => {
    /** 요청을 보낸 뒤에 response(응답)이 오는 경우에 여기서 먼저 확인이 가능하다.
     * [활용]
     * 1. status-code가 정상적이어도 내용상의 이유로 에러처리가 필요한 경우
     * 2. 민감정보 또는 데이터에 대한 가공 작업
     */
    return config;
  },
  ({ config, request, response, ...err }) => {
    /** response응답 후에 status-code가 4xx, 5xx 처럼 에러를 나타내는 경우 해당 루트를 수행한다.
     */
    const errMsg = 'Error Message';
    return Promise.reject({
      config,
      message: errMsg,
      response,
      ...err,
    });
  },
);