[typescript] 타입스크립트와 REST API 호출 시 요청 타임아웃 설정 방법

12 Dec 2023

typescript

REST API를 호출할 때 네트워크 지연이 발생할 수 있습니다. 이때 요청에 너무 많은 시간이 소요되는 것을 방지하기 위해 타임아웃 설정이 필요합니다. 타입스크립트에서 REST API를 호출할 때 요청 타임아웃을 어떻게 설정하는지 알아보겠습니다.

Axios를 사용한 REST API 호출

Axios는 타입스크립트에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. REST API 호출 시 Axios를 사용하여 요청을 보낼 수 있습니다.

import axios from 'axios';

const fetchUserData = async () => {
  try {
    const response = await axios.get('https://api.example.com/user', {
      timeout: 5000  // 5초 타임아웃 설정
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};

위의 예시에서 timeout 속성을 사용하여 요청의 타임아웃을 설정했습니다. 이 경우 5초로 설정하였으며, 5초가 지나도 응답을 받지 못하면 요청이 타임아웃됩니다.

Fetch API를 사용한 REST API 호출

Fetch API를 사용하여 REST API를 호출하는 방법도 있습니다. Fetch API를 사용할 때 요청 타임아웃을 설정하는 방법을 알아보겠습니다.

const fetchUserData = async () => {
  try {
    const controller = new AbortController();
    const signal = controller.signal;

    const timeoutId = setTimeout(() => {
      controller.abort();
    }, 5000); // 5초 타임아웃 설정

    const response = await fetch('https://api.example.com/user', { signal });
    const data = await response.json();
    clearTimeout(timeoutId);

    return data;
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};

위의 예시에서는 AbortController를 사용하여 타임아웃을 설정했습니다. 5초가 지나도 응답을 받지 못하면 요청이 중단됩니다.

결론

타입스크립트에서 REST API 호출 시 요청 타임아웃을 설정하는 방법에 대해 알아보았습니다. Axios나 Fetch API를 사용하여 요청을 보낼 때 적절한 타임아웃을 설정하여 네트워크 지연으로부터 애플리케이션을 보호할 수 있습니다.