1. 상황

api를 일부러 다른 경로를 작성했더니 위 이미지와 같이 무한대로 api요청을 한다. 이는 서버에게 심각한 부하를 가져다 줄 수 있다. 살펴보면, 재발급 api와 데이터를 받아오는 api 두 개를 반복하고 있다.

2. 문제 해결

axios interceptors에서, 계속 요청하고 있는게 아닐까?

이게 가장 유력한 원인이라 생각했다.

지금 privateApi.interceptor.response는 다음과 같다.

privateApi.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  async (error: AxiosError<ErrorType, InternalAxiosRequestConfig>) => {
		try{
			// 각 상황별 에러 처리
		}
	}catch (e) {
      return Promise.reject(e);
    }
  }
);

try를 하다가 throw문을 실행하면, catch(e)가 받아서, reject한다.

try 내부는 다음과 같다.

if (!error.response) return Promise.reject(error);

만약 error.response가 없다면, reject한다. 이 때, 이 문이 어차피 try-catch문 안에 있기 때문에 throw를 해도, catch가 받아서 reject할 것이다. 이 때 여기서 reject하는 것이 맞을까, throw하는 것이 맞을까?

throw를 하여 try .. catch문에서 한 번에 모아서 reject하는 것도 좋지만, 더 명시적으로 작성하기 위해서는 각 문에서 에러를 throw하는 것이 더 적절하다고 판단하였다.

if (
  error.response.status === AUTH_ERROR_CODES.UNAUTHORIZED ||
  error.response.status === AUTH_ERROR_CODES.NOT_FOUND
) {
  window.location.href = '/join?step=1';
}

토큰 에러라면, 회원가입 페이지로 이동시킨다. UNAUTHORIZED과 NOT_FOUND의 에러코드는 다음과 같다.

• UNAUTHORIZED: 401