Axios interceptors(인터셉터)에서 timeout 오류 처리하기

이 포스트는 https://jinjoopark.notion.site/Axios-interceptors-timeout-763beb16bf0f43048c4d9ecfd9ac5d70 에서도 보실 수 있습니다.

timeout 설정하기

axios 요청이 길어질 때 요청을 중단하고, timeout 처리를 하고 싶다면 요청 config에 timeout 설정을 해주어야 합니다.

axios 요청에서 timeout은 기본적으로 0(무한대)이기 때문에,

• 서버에서 408(timeout) 오류를 보내주지 않거나
• 보내주긴 하지만 대기시간이 길어서 요청시간을 더 짧게 잡고싶다면
  (서버 측에 timeout 시간을 줄여달라고 할 수도 있겠지만요)

반드시 설정하는 것이 좋겠습니다.

그럼 interceptors.request를 이용해 timeout을 설정하는 방법을 예시 코드와 함께 알아보겠습니다.

예시는 config.method 조건을 추가하여 get 메서드일 때만 설정하였습니다.

// axios 인스턴스 생성
const instance = axios.create({
  baseURL: 'https://api.example.com',
	headers: {
		...
	},
	// 조건문 없이 모든 요청에 대해 일괄 적용하고 싶다면 인스턴스 생성 시 설정하면 됩니다.
	// timeout: 5000,
});

// request가 발생했을 때 실행될 interceptors를 추가
instance.interceptors.request.use(
		// config는 요청에 대한 정보가 담긴 객체입니다. 궁금하면 console로 찍어보세요.
    (config) => {
				// config.method를 조회하여 get 메서드일 때만 timeout을 설정합니다.
        if (config.method === 'get') {
            config.timeout = 12000;
        }
        return config;
    },
    (error) => {
        ...
    },
);

timeout 오류 처리하기

timeout 설정을 마치면 axios 요청이 길어질 때 요청이 중단되고 error가 반환됩니다.

그리고 code 값이 ECONNABORTED로 오기 때문에 이를 조건으로 사용해 처리하면 되겠습니다.

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

		const code = error.code;
		const status = error.response?.status;

		// timeout이 발생한 경우와 서버에서 408 에러를 반환할 때를 동시에 처리하겠습니다.
		if (code === "ECONNABORTED" || status === 408) {
			alert("요청이 만료되었습니다.");
		}
    return Promise.reject(error);
  });

💡 테스트가 필요하다면 timeout을 100으로 잡고 호출해보세요.

🚨 주의할 점
timeout 오류 발생 시 error.response는 undefined가 됩니다.
interceptors 안에서 error.response.status 처럼 response 안에 있는 값을 꺼내어 쓰는 코드가 있다면 오류가 발생됩니다.
옵셔널 체이닝 문법을 이용하거나 error.response에 대해 별도의 조건 처리가 필요합니다.

🗃 참고 문서

• https://axios-http.com/kr/docs/interceptors
• https://axios-http.com/kr/docs/req_config
• https://github.com/axios/axios/issues/1174