자바스크립트 라이브러리 Axios 란?

Axios 란?

Javascript 진영에서 사용되는 Promise를 기반으로 한 HTTP 클라이언트이다.

Isomorphic 한 라이브러리이다. 간단하게, 서버 사이드와 클라이언트 사이드 두 곳에서 모두 정상적으로 작동한다.

서버 사이드에서는 node.js 의 네이티브 http 모듈을 사용한다. 클라이언트 사이드에서는 XMLHttpRequests API 를 사용한다.

특징

• 브라우저에서 XMLHttpRequests 를 사용한다.
• 서버에서 http 모듈을 사용한다.
• Promise API 를 지원한다.
• 요청, 응답 인터셉터를 지원한다.
• 요청, 응답 데이터 변환을 지원한다.
• 요청을 취소할 수 있다.
• JSON 데이터에 대한 자동 변환이 가능하다.
• 클라이언트 사이드에서 XSRF 에 대한 방어를 지원한다.

인터셉터 작성 방법

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

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

• 리액트와 같은 SPA 에서는 상위 컴포넌트에 작성해두면 된다.

axios 인터셉터 작성 예제

useEffect(() => {
  // axios 공통 로직 작성
  axios.interceptors.response.use(
    (response) => response,
    async (error) => {
      const {
        config,
        response: { status },
      } = error;

      // axios 에러 코드 419 공통 처리
      if (status === 419 && error?.response?.data?.code === "expired") {
        // refresh 토큰이 있는지 확인
        const refreshToken = await EncryptedStorage.getItem("refreshToken");
        if (!refreshToken) {
          return;
        }

        const originalRequest = config;

        // 백엔드 서버에 해당 리프레시 토큰이 유효한지 검사
        const response = await axios.post(
          `${Config.API_URL}/refreshToken`,
          {},
          {
            headers: {
              authorization: `Bearer ${refreshToken}`,
            },
          }
        );

        dispatch(
          userSlice.actions.setAccessToken(response.data.data.accessToken)
        );

        originalRequest.headers.authorization = `Bearer ${response.data.data.accessToken}`;

        // 옛날 axios 요청 그대로 다시 보내기
        return axios(originalRequest);
      }

      // 예외처리한 에러 코드가 아닌 경우
      return Promise.reject(error);
    }
  );
});

• 위는 React-Native 에서 axios 요청 시, 토큰이 만료된 경우 refreshToken 을 이용해 새로운 토큰을 발급받는 예제이다.
• 반환 값을 return axios(config); 와 같이 작성하면, 이전에 들어온 요청을 다시 수행하도록 코딩할 수 있다.