Axios의 timeout 옵션으로 요청 시간 제한 설정하기

 

https://timmousk.com/blog/axios-timeout/

 

단점 Axios를 사용하던 중 API 요청에 제한 시간을 둬야 하는 기능을 개발하게 되었고,

그 과정 중 timeout 옵션을 알게 되어 짧게 정리해보았습니다.

---

 

역할

API 요청이 timeout 옵션으로 설정한 시간 내에 완료되지 않을 경우 자동으로 요청을 취소하고 오류를 발생 시킵니다.

기본값은 0으로, 옵션을 설정하지 않거나 0을 설정한 경우 무제한으로 요청을 대기할 수 있습니다.

 

timeout을 설정하면 애플리케이션의 응답성을 높이고, 불필요한 대기를 방지할 수 있습니다.

---

설정 방법

import axios from 'axios';

// 1분 (60초)으로 타임아웃 설정
const axiosInstance = axios.create({
  timeout: 60000
});

axiosInstance.get('/api/endpoint')
  .then(response => {
    console.log('응답 데이터:', response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.error('요청 시간 초과');
    } else {
      console.error('API 요청 오류:', error);
    }
  });

---

장단점

장점	응답성 향상	네트워크 지연이나 서버의 느린 응답으로 인해 애플리케이션이 무한히 대기하는 것을 방지합니다.
	리소스 관리	요청이 시간 내에 완료되지 않으면 오류를 처리하여 불필요한 리소스 소모를 줄일 수 있습니다.
단점	잘못된 타임아웃 설정으로 인한 문제 발생	너무 짧은 타임아웃 값은 서버가 응답을 보내기 전에 요청을 취소할 수 있습니다. 이는 불필요한 오류를 발생시킬 수 있으며, 서버가 실제로는 정상적으로 응답을 처리하는 경우에도 문제가 될 수 있습니다.
	네트워크 지연과 비동기 처리	네트워크 지연이나 서버의 비동기 처리로 인해 실제로는 요청이 완료되었지만 타이머에 의해 요청이 취소될 수 있습니다. 이는 데이터가 성공적으로 수신되었지만 클라이언트에서 오류로 처리되는 상황을 초래할 수 있습니다.
	클라이언트의 리소스 소모	타임아웃을 설정해도 클라이언트는 여전히 일정 시간 동안 요청을 대기하며, 이로 인해 불필요한 자원 소모가 발생할 수 있습니다. 특히, 서버가 응답을 보내지 않거나 네트워크 문제가 심각할 경우 클라이언트의 리소스 소모가 증가할 수 있습니다.
	불완전한 오류 처리	timeout 오류가 발생하면 클라이언트에서 이를 처리해야 합니다. 잘못된 오류 처리 로직이 있으면 사용자에게 혼란을 줄 수 있으며, 애플리케이션의 신뢰성을 낮출 수 있습니다.