Axios Interceptors 적용해보기

API 로직을 작성하면서 단순하게 요청, 응답 데이터 처리, 에러 메시지 전달 로직을 작성하는 것에 그쳤다.

 

이번에 Axios Interceptors로 기존의 API 로직을 수정해보았다.

 

Axios Interceptors

Axios Interceptors는 interceptor라는 단어의 의미에 알맞게 API 요청/응답을 주고받을 때,

요청 전/ 요청 후에 각 동작을 가로채서 특정 전처리를 해준다.

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

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

사용 전에 공식문서와 블로그를 참고하여 다양한 개선사항을 반영할 수 있을 것 같다는 생각이 들어 적용하기로 하였다.

 

내가 이번 Axios Interceptors로 하고자 하는 것은 다음과 같다.

1. BaseURl 지정

2. header 및 토큰 지정

3. Error Handling

 

개선 후 코드

import axios from 'axios';

export const apiInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:1024' : 'http://saaipeer.com',
  timeout: 5000,
});

apiInstance.interceptors.request.use(
  (config) => {
    if (config.url.includes('evaluation-papers') && !config.url.includes('students')) {
      const token = document.cookie.match('(^|;) ?token=([^;]*)(;|$)');
      config.headers.Authorization = token[2];
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

apiInstance.interceptors.response.use(
  function (response) {
    if (response.config.url.includes('token')) {
      const token = response.data.token;
      const date = new Date();
      date.setTime(date.getTime() + 1000 * 60 * 60);
      document.cookie = 'token=' + token + ';expires=' + date.toUTCString() + ';path=/';
    }

    return response.data;
  },
  function (error) {
    return Promise.reject(error);
  }
);

 

개선 후에는 다음과 같은 이점을 얻을 수 있었다.

 

1. 동일 axios instance

기존 모든 로직에서 axios.~으로 요청을 보내는 것은 보낼 때마다 axios instance를 새롭게 생성하는 방법이다. 초기에 한 개의 axios instance를 만들고, 이 instance를 호출하여 사용하도록 하였다. 이때 axios instance를 선언하는 과정에서 baseURL과 timer 프로퍼티를 지정해줌으로써 일괄적으로 모든 요청에 적용 가능했다.

 

2. token 관리

기존 로직에서는 토큰이 필요한 로직 내에서 토큰 정보를 확인하고, 가져오는 메서드를 따로 만들어 내부에서 사용하도록 했다. 함수를 선언할 때, 한 가지의 동작만 하도록 하는 것이 더 명확한 함수 정의 방식이라고 생각해 기존 API 요청 로직 내부에 있는 토큰 관련 로직을 Interceptor에서 관리하여 API 요청 로직은 더욱 요청에 집중한 로직으로서 관심사를 분리시킬 수 있었다.

 

3. Error Handler

요청 시, 응답 에러에 대해서 일괄적으로 에러를 적용시킬 수 있다. 이 장점의 경우 위 로직에서는 에러 객체를 넘겨주는 것으로 충분하다고 생각하여 추가로 코드를 덧붙이지 않았다. 이후 에러 status 별로 다른 처리를 해줄 필요가 있을 경우 여기 영역에서 처리해줄 수 있어 API 요청 코드 영역에서 코드량을 확실히 줄일 수 있을 것 같다는 생각을 했다.

 

 

Reference

인터셉터 | Axios Docs

axios interceptor 적용하기