Axios Interceptor

Axios Interceptor란?

axios에서 요청과 응답을 가로채 특정 로직을 수행할 수 있도록 하는 middleware

then, 또는 catch로 처리되기 전에 수행된다.

왜 Axios Interceptor가 필요한가요?

클라이언트 서비스 전반에서 사용자 인증 정보를 헤더에 추가해줘야 하는 경우가 존재한다.

또한 accesstoken이 만료되었을시, catch를 통해 accesstoken을 다시 재발급해주는 경우가 있을 수도 있다.

위와 같이 사용자 인증 헤더, accesstoken 관리 등 axios 과정에서 처리해줘야 하는 로직들이 반복적으로 발생하는데, 이러한 로직들을 axios interceptor를 통해 일괄적으로 관리할 수 있다.

즉 개발 효율성이 엄청나게 향상한다.

기본 문법

Request Interceptor

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

Response Interceptor

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