Axios는 JavaScript 및 TypeScript에서 사용되는 인기 있는 HTTP 클라이언트 라이브러리입니다. 특히, API 요청 시간에 대한 제한을 설정하는 것은 네트워크 요청 관리에 중요한 요소입니다. 이 기능은 서버 응답 시간이 너무 길거나 요청이 중단되어야 하는 경우에 유용합니다.

Axios 인스턴스에서 요청 시간 제한 설정

Axios를 사용하여 요청 시간에 대한 제한을 설정하려면, Axios의 인스턴스를 생성하고 해당 인스턴스에서 timeout 속성을 설정해야 합니다.

import axios, { AxiosInstance } from "axios";

// Axios 인스턴스 생성
const instance: AxiosInstance = axios.create({
  timeout: 5000, // millisecond 단위
});

위의 예제에서 timeout 속성은 5000밀리초(5초)로 설정되었습니다. 이는 해당 시간 내에 서버로부터 응답이 없는 경우에 요청이 중단됨을 의미합니다.

요청 시간 제한을 설정한 Axios 인스턴스로 요청 보내기

이제 timeout이 설정된 Axios 인스턴스를 사용하여 요청을 보낼 수 있습니다. timeout 속성을 설정한 인스턴스를 사용하면 해당 요청은 설정된 시간 내에 응답을 받지 못하면 에러가 발생합니다.

instance.get("https://api.example.com/data")
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (error.code === 'ECONNABORTED') {
      console.log('요청 시간이 초과되었습니다.');
    }
  });

위의 예제에서 timeout 시간(5초) 내에 서버로부터 응답을 받지 못한 경우, “요청 시간이 초과되었습니다.”라는 메시지가 콘솔에 출력됩니다.

Axios를 사용하여 요청 시간에 대한 제한을 설정하는 과정은 상대적으로 간단하지만 매우 유용합니다. 네트워크 환경에서 요청 시간 제한을 설정함으로써 응용 프로그램의 안정성과 성능을 향상시킬 수 있습니다.

참고 자료

• Axios 공식 문서: axios - GitHub
• MDN web docs: Using Fetch - MDN Web Docs

이제 Axios를 사용하여 요청 시간에 대한 제한 설정하는 방법에 대해 알아보았습니다. 설정된 timeout을 통해 응답 시간을 관리함으로써 안정적인 네트워크 통신을 보장할 수 있습니다.