Axios interceptor

Axios interceptor란?

Axios docs - interceptor를 보면 Promise 응답에 대해 then, catch로 처리되기 전에 요청과 응답을 가로챌 수 있다고 나와있음.

처음엔 refreshToken 자동발급을 해결하기 위해 사용했는데, 사용하다보니 정말 편하다는걸 느꼈다

//refresh//
interface AuthResponse {
    accessToken: string;
    refreshToken: string;
  }
  api.interceptors.response.use(
    (response: AxiosResponse) => response,
    async (error) => {
      const originalRequest = error.config;

      if (error.response?.status === 401 && !originalRequest._retry) {
        originalRequest._retry = true;

        try {
          const res = await api.post<AuthResponse>("/user/reissue", {
            headers: {
              RefreshToken: `Bearer ${refreshToken}`,
            },
          });

          setAccessToken(res.data.accessToken);
          setRefreshToken(res.data.refreshToken);

          localStorage.setItem("accessToken", accessToken);
          localStorage.setItem("refreshToken", refreshToken);

          axios.defaults.headers.common[
            "Authorization"
          ] = `Bearer ${accessToken}`;

          return api(originalRequest);
        } catch (e) {}
      }

      return Promise.reject(error);
    }
  );

위 코드를 설명하자면 401 코드가 응답으로 왔을때, refreshToken URL로 post를 날려준다

post 응답으로 다시 생성된 accessToken과 refresToken을 저장해주는 코드이다

내가 interceptor를 사용한 제일 큰 이유는

각각의 api 요청을 보낼 때 마다 불필요한 axios 코드를 줄이기 위해서 생성했다.

axios 코드마다 동일한 accessToken을 헤더에 담아 보내주는 등의 반복적인 작업을 줄일 수 있음

const accessToken = localStorage.getItem("accessToken");
export const api = axios.create({
  baseURL: "http://3.35.129.231:8080",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${accessToken}`,
  },
  timeout: 12000,
});

axios.create로 baseURL 설정, header값(accessToken) 설정을 해주고

const getNewsBrandList = async () => {
  const response = await api.get("/news/press");
  return response.data.map((item: selectedNewsListType) => item.pressName);
};

비동기 요청이 필요한 곳에서{api}를 import 해주고 위와같이 사용하면

const response = await axios.get("http://3.35.129.231:8080/news/press", 
	headers: {
	"Content-Type": "application/json",
	Authorization: `Bearer ${accessToken}`,
},
timeout: 12000,
});

위 코드와 같은 기능을 하게됨.

필요한 곳에 api를 임포트 해주고 사용하면 정말 간편하다.

아직 모든기능을 익힌건 아닌거 같아 개인적으로 따로 공부해봐야 할것같다