Axios의 인터셉터, 인스턴스를 활용하여 네트워크 요청 모듈화

많은 프로젝트를 진행하면서 api통신을 해야할때는 axios 라이브러리를 사용했다.
그 이유는 인스턴스와 인터셉터가 가져다 주는 편리함이 너무 좋았다

인스턴스

const instance = axios.create({
  // 상대적인 URL을 인스턴스 메서드에 전달하려면 baseURL을 설정하는 것은 편리하다.
  // URL(서버 주소) 예시 - http://127.0.0.1:5500
  baseURL: URL,
  // 요청이 timeout보다 오래 걸리면 요청이 중단된다.
  timeout: 1000,
  // 헤더값
  headers: {
    'Content-Type': 'application/json',
  },
});

• 인스턴스는 위와같이 서버주소라던지 타임아웃, 기본 헤더값을 미리 설정하고 재사용 할 수 있다! 벌써 편함
  
  

요청 인터셉터

instance.interceptors.request.use(
  (config) => {
    // getToken() - 클라이언트에 저장되어 있는 액세스 토큰을 가져오는 함수
    const accessToken = getToken();

    config.headers['Content-Type'] = 'application/json';
    config.headers['Authorization'] = `Bearer ${accessToken}`;

    return config;
  },
  (error) => {
    console.log(error);
    return Promise.reject(error);
  }
);

• request를 사용하면 요청이 전달되기 전에 개입 할 수 있다.
• 예시와같이 accesstoken이나 헤더 토큰을 추가하면 원래 요청에 해당 내용이 추가가 되어 실행된다
  
  

응답 인터셉터

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    if (error.response?.status === 401) {
      // isTokenExpired() - 토큰 만료 여부를 확인하는 함수
      // tokenRefresh() - 토큰을 갱신해주는 함수
      if (isTokenExpired()) await tokenRefresh();

      const accessToken = getToken();

      error.config.headers = {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`,
      };

      // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
      const response = await axios.request(error.config);
      return response;
    }
    return Promise.reject(error);
  }
);

• response를 사용하여 요청의 응답의 적용 할 수 있다
• 예시처럼 토큰만료 코드인 401을 응답 받았을때 토큰 재발행하는 함수를 실행하고 기존 요청에 새로운 토큰을 넣어 다시 시도하는 방법으로 많이 사용한다.

몇줄 안되지만 위처럼 모듈화를 해놓고 사용하면 개발할때 수고스러움을 많이 덜어준다. 개꿀