Http 요청 시 응답이 지연될 수도 있습니다.
Axios의 timeout 기능을 통해 일정 시간 내에 응답이 없다면, 해당 요청을 취소할 수 있습니다.
Axios의 timeout은 기본값은 0으로 timeout이 없음을 의미합니다.
Timeout은 밀리초 단위로 시간을 지정할 수 있고, 지정된 시간을 초과할 경우 요청이 중단됩니다.
모든 요청에 적용할 timeout을 설정할 수 있습니다.
import axios from "axios";
axios.defaults.timeout = 5000;
Axios 인스턴스를 생성하거나 생성된 인스턴스에 timeout을 설정할 수 있습니다.
// 인스턴스 생성 시 timeout 설정
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
// ...other configs,
timeout: 1000,
});
// 생성된 인스턴스의 timeout 값 재정의
instance.defaults.timeout = 2500;
instance.interceptors.request.use(config => {
config.timeout = 5000;
return config;
});
instance.get('/getRequest', {
timeout: 2500,
});
Timeout 에러가 발생하면 error
객체의 code
속성 값이 'ECONNABORTED'
입니다.
이를 이용하여 catch
블록에서 에러 처리를 할 수 있습니다.
instance.interceptors.response.use(
response => response,
error => {
if (error.code === 'ECONNABORTED') {
console.log('요청이 중단되었습니다.');
}
return Promise.reject(error);
}
);
instance.get('/getRequest', { timeout: 2500 })
.then((response) => console.log(response))
.catch((error) => {
if (error.code === 'ECONNABORTED') {
console.log('해당 요청이 중단되었습니다.');
} else {
console.log(error);
}
});
// try-catch 문 사용
const getRequests = async () {
try {
const { data } = await instance.get('/getRequest', { timeout: 2500 });
return data;
} catch (error) {
if (error.code === 'ECONNABORTED') {
console.log('해당 요청이 중단되었습니다.');
} else {
console.log(error);
}
}
}
참고