Timeout | Axios

Bori·2023년 11월 19일

어쨌든 공부

목록 보기

34/40

Http 요청 시 응답이 지연될 수도 있습니다.
Axios의 timeout 기능을 통해 일정 시간 내에 응답이 없다면, 해당 요청을 취소할 수 있습니다.

Timeout 설정하기

Axios의 timeout은 기본값은 0으로 timeout이 없음을 의미합니다.
Timeout은 밀리초 단위로 시간을 지정할 수 있고, 지정된 시간을 초과할 경우 요청이 중단됩니다.

전역 Axios timeout 설정하기

모든 요청에 적용할 timeout을 설정할 수 있습니다.

import axios from "axios";

axios.defaults.timeout = 5000;

커스텀 인스턴스 timeout 설정하기

Axios 인스턴스를 생성하거나 생성된 인스턴스에 timeout을 설정할 수 있습니다.

// 인스턴스 생성 시 timeout 설정
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  // ...other configs,
  timeout: 1000,
});

// 생성된 인스턴스의 timeout 값 재정의
instance.defaults.timeout = 2500;

request interceptors를 이용하여 timeout 설정하기

instance.interceptors.request.use(config => {
  config.timeout = 5000;
  return config;
});

특정 요청에 대한 timeout 설정하기

instance.get('/getRequest', {
  timeout: 2500,
});

Timeout 에러 처리

Timeout 에러가 발생하면 error 객체의 code 속성 값이 'ECONNABORTED' 입니다.
이를 이용하여 catch 블록에서 에러 처리를 할 수 있습니다.

response interceptors를 이용하여 timeout 에러 처리

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED') {
      console.log('요청이 중단되었습니다.');
    }
    return Promise.reject(error);
  }
);

특정 요청에 대한 timeout 에러 처리

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);
    }  
  }  
}