axios의 interceptors 기능 사용하기

🍎 Axios나 ky, got과 같은 Promise 기반 HTTP 라이브러리에서는 interceptors 기능을 제공한다.

🍏 interceptors를 설정하여 매번 API가 처리되기 전에, 요청이나 응답을 가로채 그 사이에 함수를 실행시킬 수 있다. 

 

예를 들면, 요청 전에 인증 토큰을 가져와 설정해두면, 매번 요청할 때 마다 인증 설정을 해야하는 번거로움을 줄일 수 있다.

    axios.interceptors.response.use(
      response => response, // 성공
      error => {
        const {
          config, // 기존의 요청
          response: {status},
        } = error;
        console.log("status", status);
        return Promise.reject(error); 
        // return axios(config); // 실패시 다시 요청을 보낸다.
      },
    );

 

• 설정해둔 인터셉터는 요청/응답이 있을 때마다 호출되어 실행된다.
• axios.interceptors.request를 통해서 요청이 있을 때 실행될 함수를 설정한다.
• axios.interceptors.response를 통해 응답이 있을 때 실행할 함수를 설정한다.
• 응답과 요청 모두 .use를 통해 설정될 수 있는데, 첫 번째 인자로 실행될 함수를 전달하고, 두 번째 인자로 오류가 발생하였을 때 실행할 함수를 설정한다.

• interceptors를 사용하여 중복되는 코드를 줄일 수 있다.
• 만약 매번 요청 전에 localstorage에서 토큰을 꺼내 headers.authorization에 설정해야 한다면, axios.interceptors.request를 사용하여 설정할 수 있다.
• 만약, 응답에 에러가 담겨왔을 때 다시 요청을 보내고자 한다면 axios.interceptors.response를 사용하여 다시 요청을 보낼 수 있다.
• 필요 없어진 인터셉터는 axios.interceptors.request.eject나 axios.interceptors.response.eject를 통해 제거할 수 있다.
• axios.create()로 만든 커스텀 인스턴스에도 인터셉터는 적용이 가능하다.

import axios from "axios";

const apiCall = axios.create();

apiCall.interceptors.request.use(
  (request) => {
    // throw Error("REQUEST ERROR !!!"); // 에러 테스트
    console.log("request OK");
    return request;
  },
  (error) => {
    console.log("request ERROR", error);
    return Promise.reject(error);
  }
);

apiCall.interceptors.response.use(
  (response) => {
    console.log("response OK");
    return response;
  },
  (error) => {
    const { config, response } = error;
    console.log("response ERROR", config, "\n", response);
    return Promise.reject(error);
  }
);

export default apiCall;

 

공식 문서 : https://axios-http.com/kr/docs/interceptors

인터셉터 | Axios Docs