[javascript] 비동기 데이터 요청에서의 타임아웃 설정

11 Dec 2023

javascript

웹 개발을 하다 보면 서버에 데이터를 요청할 때, 데이터가 너무 오래 걸려 응답이 없을 수도 있습니다. 이러한 경우에 대비하여 요청에 대한 타임아웃(timeout)을 설정할 수 있습니다. 특히, 자바스크립트를 사용하여 비동기적으로 데이터를 요청할 때에는 타임아웃 설정이 매우 중요합니다. 이번 글에서는 자바스크립트를 사용하여 비동기 데이터 요청에서의 타임아웃을 설정하는 방법에 대해 알아보겠습니다.

자바스크립트에서의 타임아웃 설정

XMLHttpRequest를 이용한 타임아웃 설정

가장 기본적인 방법은 XMLHttpRequest 객체를 사용하여 데이터를 요청하고, 타임아웃을 관리하는 것입니다. 아래는 타임아웃을 설정한 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.timeout = 5000; // 5초 내에 응답이 없을 경우 타임아웃 발생
xhr.ontimeout = function () {
  // 타임아웃 시 수행할 작업
  console.log('데이터 요청이 타임아웃 되었습니다.');
};
xhr.send();

Fetch API를 이용한 타임아웉 설정

Fetch API를 사용하여 데이터를 요청할 때에는 timeout 옵션을 지원하지 않아 직접 타임아웃을 구현해야 합니다. 아래는 Fetch API를 사용하여 타임아웃을 설정하는 예제 코드입니다.

function fetchWithTimeout(url, options, timeout = 5000) {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('데이터 요청이 타임아웃 되었습니다.')), timeout)
    )
  ]);
}

fetchWithTimeout('/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

마무리

자바스크립트를 사용하여 비동기 데이터 요청을 할 때에는 타임아웃 설정을 통해 응답 시간을 제어할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 애플리케이션의 안정성을 높일 수 있습니다.

참고 문헌: