Axios를 사용하여 HTTP 요청을 보낼 때, 서버로부터 응답이 일정 시간 내에 도착하지 않을 경우를 대비해 응답 시간 초과를 처리해야 합니다. 이를 통해 네트워크 지연으로 발생할 수 있는 문제를 관리하고 사용자 경험을 향상시킬 수 있습니다.

아래에서는 TypeScript와 Axios를 사용하여 HTTP 응답 시간 초과를 처리하는 방법에 대해 설명하겠습니다.

Axios 라이브러리 설치

먼저 프로젝트에 Axios 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm 또는 yarn을 통해 설치할 수 있습니다.

npm install axios

또는

yarn add axios

응답 시간 초과 설정

Axios를 사용하여 HTTP 요청을 보낼 때, timeout 옵션을 사용하여 응답 시간 초과를 설정할 수 있습니다. timeout 옵션은 milliseconds 단위로 지정됩니다.

아래는 예시입니다.

import axios, { AxiosRequestConfig } from 'axios';

const axiosConfig: AxiosRequestConfig = {
  timeout: 5000, // 5초
};

axios.get('https://example.com/api', axiosConfig)
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.code === 'ECONNABORTED') {
      console.error('요청 시간 초과');
    } else {
      console.error('에러 발생:', error);
    }
  });

위 코드에서 axiosConfig 객체에 timeout 값을 설정하여 5초 내에 응답이 도착하지 않을 경우 요청을 취소하고 오류를 발생시킵니다. catch 블록에서 error.code를 확인하여 요청 시간 초과 여부를 처리할 수 있습니다.

요청 시간 초과 후 처리

요청 시간이 초과되었을 때 사용자에게 알리거나 대체 데이터를 제공하는 등의 처리를 추가할 수 있습니다. 예를 들어, 사용자에게 “네트워크 연결이 불안정합니다”와 같은 메시지를 표시하거나, 대체 데이터를 제공하여 사용자 경험을 개선할 수 있습니다.

HTTP 응답 시간 초과를 처리함으로써 사용자는 더 나은 서비스를 경험하고 애플리케이션의 신뢰성이 향상됩니다.

참고 자료

• Axios 공식 문서
• MDN Web Docs - HTTP 요청 시간 초과 처리

위 내용은 TypeScript와 Axios를 사용하여 HTTP 응답 시간 초과를 처리하는 방법에 대한 간단한 안내입니다. Axios를 사용하여 프로젝트에서 HTTP 요청을 보낼 때, 응답 시간 초과를 고려하여 안정적인 서비스를 제공할 수 있습니다.