axios interceptors로 API 요청/응답 핸들링하기

interceptors

 

Axios Interceptors ❓

axios로 주고받는 요청과 응답을 가로채서 핸들링할 수 있습니다.

호출하는 매 순간마다 요청과 응답에 대한 처리를 하지 않고, 공통적으로 처리할 수 있습니다.

주로 jwt토큰 인증, 재발급에 쓰입니다.

 

Usage ⚡️

먼저 axios instance를 생성해줍니다.

const axiosInstance = axios.create({
    baseURL: {api주소}
  });

 

 

axios 요청을 가로채서 핸들링합니다.

요청 url에 따라 처리를 할 수 있고, 요청 헤더를 셋팅할 수 있습니다.

axiosInstance.interceptors.request.use(
  (config: any) => {
    return convertRequest(config);
  },
  (error) => {
    return Promise.reject(error);
  }
);
const convertRequest = async ({ ...request }) => {
  if (request.url.includes("/v1")) {
    const token = jsCookie.get("accessToken");
    request.headers.Authorization = `Bearer ${token}`;
  }
  if (request.url.includes("/v2")) {
    request.params = {
      ...request.params,
      apiKey: "apiKey",
    };
  }
  if (request.url.includes("/v3")) {
    const token = localStorage.getItem("ACCESS_TOKEN");
    request.withCredentials = false;
    request.headers["jwt-token"] = token;
    request.url += `${request.url.includes("?") ? `&` : "?"}token_type=${
      process.env.REACT_APP_TOKEN_TYPE
    }`;

    if (request.method === "get") {
      request.params = {
        ...request.params,
        ...{
          ...(request.url.includes("/v4") && { action_type: "json" }),
        },
      };
    }

    if (request.method === "post") {
      request.data = {
        ...request.data,
        ...{
          ...(request.url.includes("/v5") && { action_type: "json" }),
        },
      };
    }
  }
  return request;
};

 

axios의 응답을 가로채서 핸들링합니다.

응답 값에 따라 토큰을 재발급하거나 알럿을 띄우거나 오류 페이지로 이동시킬 수 있습니다.

  axiosInstance.interceptors.response.use(
    (response) => {
      if (response.data?.err_code === 401) {
        return await refreshToken(response);
      }
      if (response.data?.result === '3006' || response.data?.result === '3007') {
        return await refreshToken(response);
      }
      if (response.data.result === RESULT_CODE.API_INTERNAL_ERROR) {
        openLayer({
          title: '오류 안내',
          content: response.data.reason,
          confirm: '닫기',
        });
      }
      return response;
    },
    (error) => {
      if (error?.response?.status === 401) {
        return await refreshToken(error);
      }
      router.push('/page-error');
      return Promise.reject(error);
    }
  );

 

 

이제 입맛에 맞게 axios의 요청과 응답을 가로채서 핸들링하시면 됩니다.

 

 

 

 

참고 🍀

공식문서

인터셉터 | Axios Docs