[JS] axios interceptor 를 이용해서 요청,응답 커스터마이징 하는 방법

axios interceptor 를 이용해서 요청,응답 커스터마이징 하는 방법

안녕하세요. 이번 포스팅에서는 axios의 interceptor를 이용해서 requset, response를 커스터마이징 하는 방법에 대해서 알아보겠습니다.

인터셉터

인터셉터 사용방법을 예시 코드를 통해 확인해보겠습니다.

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) { 
    // config에는 axios요청시 입력한 config가 들어있습니다.
    // config를 가공해서 요청하는 것이 가능합니다 !
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

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

 

인터셉터를 제거하는 방법을 확인해 보겠습니다.

const myInterceptor = axios.interceptors.request.use(function () { /*...*/ });
axios.interceptors.request.eject(myInterceptor);

 

특정한 경우에만 인터셉터를 이용하고 싶으시다면, 변수를 만들어 이용할 수 있습니다.

const instance = axios.create();
instance.interceptors.request.use(function () { /*...*/ });