Axios interceptors

axios에서 instance(baseURL, headers..등등을 설정)를 설정해주면, 기본적인 통신(?)설정을 할 수 있다. 이에 추가로 interceptors를 추가하면 서버에 통신을 보내거나(request), 값을 받을 때(response) 추가적인 작업을 해줄 수 있게 된다.
요약하면 요청을 하거나 받기 전에 그 것을 가로채서 내가 설정을 해줄 수 있다.

사용 코드

• api.js

...
const instance = axios.create({
  baseURL: `${process.env.REACT_APP_HOME_URL}`,
});
...

api.js에서 baseURL을 설정해주기 위해 instance를 생성해 주었다.

요청에 사용

...
instance.interceptors.request.use(
  (config) => {
    const headers = config.headers;
    const TOKEN = Cookies.get("Token");
    console.log(TOKEN);
    if (TOKEN) {
      console.log("if in token");
      headers.Authorization = TOKEN;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
...

interceptors.request를 사용하여 요청을 보내기 전에, 토큰이 있다면 토큰을 header에 추가해서 보내는 설정을 해주었다.

응답에 사용

...
home.interceptors.response.use((response) => {
  if (response.config.url.replace(/[0-9]/g, "") === "/api/pets/details/") {
    const refinedata = refineData(response.data);
    const newData = { ...response.data, refinedata };
    response.data = newData;
    return response;
  } else if (response.config.url.split("?")[0] === "/api/pets/info-list") {
    let newArray = [...response.data.publicPetResponsDto];
    newArray.map((item) => {
      const refinedata = refineData(item);
      const newData = { ...item.data, refinedata };
      item.data = newData;
      return newData;
    });
    response.data.publicPetResponsDto = [...newArray];

    return response;
  }
  return response;
});
...

코드가 정리되진 않았지만 우선 설명해보자면, 응답을 받은 후에 값을 조금 내 입맛(?)대로 수정하기 위해서 refineData()함수를 사용해서 값을 response.data에 추가해주었다.