TIL: Javascript | axios interceptor

interceptor

axios 호출에 대해 .then() 또는 .catch() 이전 요청과 응답을 가로챌 수 있다
가로챈 통신에 작업을 추가하여
반복되는 작업에 대해 처리하거나
특정 에러를 걸러낼 수도 있다
데이터를 정제하거나, 주로 로그인 인증에 사용

커스텀 인스턴스

const instance = axios.create(); // 커스텀 인스턴스 생성

인터셉터 추가

인터셉터는 요청과 응답 각각 설정할 수 있다
각각의 .use() 메소드에는 1~2 개의 콜백 함수를 인자로 줄 수 있고
첫 번째 인자의 콜백은 요청과 응답 성공 시
두 번째 인자의 콜백은 error 발생 시 수행할 작업을 정의한다

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

인터셉터 제거

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