서론

여러분들은 axios로 통신을 어떻게 하고 계셨나요?
저는 예전에 axios를 써 본 경험이라곤 오픈 API 들고오는 정도에 그쳤기에 '아니 그거 그냥 axios 불러오고 주소 넘기고 http 메서드 붙이면 끝 아님? ㅋㅋ' 라고 생각하고 있었답니다...
그런데 이번에 전공 동아리 프로젝트를 해 보면서 느낀건, 백엔드랑 통신을 하려고 할 때 페이지 마다 일일히 axios를 import 하고, api 주소를 적고 하는걸 반복적으로 하게 되다 보니 상당히 불편하더라구요.
그래서 자료를 뒤져보다 보니 axios에 대해 알게 된 것들이 늘어 한 번 적어보려고 합니다. 가보자고~

axios 인스턴스 만들기

axios 인스턴스는 쉽게 말해 커스텀 axios 함수입니다.
axios에 기본 세팅을 해 줌으로서 반복을 줄일 수 있게 될 것이고, 사용하는데도 더 편하겠죠.

axios.create 를 이용해 인스턴스를 만들 수 있습니다.

const instance = axios.create();

기본 설정을 하려면 create 함수에 객체를 넘기면 됩니다.

const instance = axios.create({
  baseURL: API_URL, // instance를 쓰면 해당 주소를 기준으로 요청을 보냄
  timeout: 10000, // 요청 후 timeout 초과시 요청 실패 처리
  headers: { 'Content-Type': 'application/json' }, // HTTP Header 정보를 설정
});

이런 식으로 기본값을 설정 해 줄 수 있습니다. 굿굿 이제 직접 만든 instance만 가져와서 쓰면 됨 완전편함
다른 설정도 할 수 있는데 너무 많아서 다른게 필요하다면 여기를 참고합시다...

인터셉터

인터셉터는 then 이나 catch 로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

+) async await에도 동일하게 적용됩니다 !!

// 요청 인터셉터 
axios.interceptors.request.use(
  (config) => {
    // 요청이 전달되기 전에 수행
    return config;
  },

  (error) => {
    // 요청 오류시 수행
    return error;
  },
);

// 응답 인터셉터
axios.interceptors.response.use(
  (response) => {
    // 응답 데이터가 있는 작업 수행 (상태 코드가 2xx 범위일 때 수행)
    return response;
  },

  (error) => {
    // 응답 오류가 있는 작업 수행 (상태 코드가 2xx 범위가 아닐 때 수행)
    return error;
  },
);

instance에도 똑같이 인터셉터를 만들수 있습니다 걱정ㄴㄴ

그러면 이 친구들을 어떻게 하면 잘 썼다고 소문이 날까요?

다음은 제가 실제로 쓴 코드입니다.

instance.interceptors.request.use(
  (config) => {
    
    { ... }

    if (accessToken) {
      config.headers.Authorization = accessToken;
    }

    return config;
  },

  (error) => {
    return error;
  },
);

instance.interceptors.response.use(
  (response) => {
    return response;
  },

  (error) => {
    const { status } = error.response;

    { ... }

    if (status === 403) {
      window.location.reload;
      handleAccessTokenRequest();
    }

    return error;
  },
);

물론 제가 잘했다고 올린건 아니고... 제가 생각해본 인터셉터 사용처 입니다. (사실 이렇게 처리하는게 맞는지 좀 의문이 들기도 합니다......)
저는 위와 같이 요청을 보내기 전 headers의 Authorization에 액세스 토큰을 알아서 추가해주는 기능과 토큰이 만료되었을 때 (403 에러), 새로운 토큰을 지급받도록 요청을 보내는 기능을 넣었습니다. 혹시 다른 좋은 생각 있으시다면 댓글 남겨주시면 정말정말 좋을것같아요

마무리

프로젝트를 하면서 axios에 대해 더 알아보았는데, 엄청 유익했고 실제로 엄청 편리했다. 잘 기억해 뒀다가 다음에도 야무지게 쓰자! 그리고 공식문서 꼮!!!!!!!!!!!!!!! 잘 확인하고 라이브러리 쓰자...^_^

참고 : 공식문서, 러닝 가이드