Axios의 Interceptors을 통해 사전처리 및 Error Handling 하기

Axios?

브라우저와 node.js에서 사용할 수 있는 HTTP 클라이언트 라이브러리.

이번 프로젝트에서 서버와 데이터를 주고 받기 위해 axios 라이브러리를 사용했다. Web API인 fetch 보다 익숙했으며 유용한 API들이 많아 사용하게 되었다. 이전에도 axios을 사용해본 경험이 있었지만, 이번 프로젝트를 통해 interceptors, create 등을 알게되어 정리하게 되었다.

Interceptors

then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다.
Axios 공식 문서

말 그대로 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있어 공통적으로 처리 되어야 하는 작업들을 interceptors을 통해 처리할 수 있다. 따라서 이번 프로젝트에서 로그인 후 headers.Authorization에 붙어야 하는 토큰 값을 interceptors을 통해 처리했다

// baseURL 설정
const reviewAxios = axios.create({ baseURL: `${apiUrl}/reviews` });
// headers.Authorization = { `Bearer ${YOUR_TOKEN}` }으로 설정
reviewAxios.interceptors.request.use((config: AxiosRequestConfig) => {
  if (checkUserToken()) {
    config.headers = {
      Authorization: `Bearer ${YOUR_TOKEN}`,
    };
    return config;
  }
  return config;
});

// 공통적으로 처리되어야 하는 응답 혹은 오류를 이곳에서 처리
reviewAxios.interceptors.response.use(
  (response) => response,
  (error) => {
    return Promise.reject(error);
  },
);