이 포스트는 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에 대해 별도의 조건 처리가 필요합니다.
axios 0.21.1 버전에서 작성하였습니다.
🗃 참고 문서
2021년 9월부터 Frontend 개발자로 일하고 있습니다. :)