[typescript] 비동기 작업에 대한 타임아웃 설정 방법

14 Dec 2023

typescript

비동기 작업을 수행할 때 종종 타임아웃 설정이 필요합니다. 특히 TypeScript에서는 Promise나 async/await를 사용하여 비동기 작업을 처리할 때 타임아웃을 설정하는 방법이 중요합니다. 이 글에서는 TypeScript에서 비동기 작업에 대한 타임아웃을 설정하는 방법에 대해 알아보겠습니다.

Promise를 사용한 타임아웃 설정

Promise를 사용하여 비동기 작업을 수행하는 경우, Promise.race()를 사용하여 타임아웃을 설정할 수 있습니다.

function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
  const timeoutPromise = new Promise<T>((_, reject) => {
    setTimeout(() => {
      reject(new Error('Timeout'));
    }, timeoutMs);
  });

  return Promise.race([promise, timeoutPromise]);
}

// 사용 예
const fetchData = new Promise<string>((resolve) => {
  setTimeout(() => {
    resolve('Data retrieved');
  }, 500);
});

withTimeout(fetchData, 1000)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

위 코드에서 withTimeout 함수는 입력된 promise와 타임아웃을 비교하여 처리하며, 지정된 시간 내에 promise가 완료되지 않으면 타임아웃 에러를 반환합니다.

async/await를 사용한 타임아웃 설정

async/await를 사용하여 비동기 작업을 처리할 때는 Promise.race()를 사용하는 방법과 유사합니다.

async function fetchDataWithTimeout(timeoutMs: number): Promise<string> {
  const fetchDataPromise = new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve('Data retrieved');
    }, 500);
  });

  const timeoutPromise = new Promise<string>((_, reject) => {
    setTimeout(() => {
      reject('Timeout');
    }, timeoutMs);
  });

  try {
    return await Promise.race([fetchDataPromise, timeoutPromise]);
  } catch (error) {
    throw new Error('Timeout Error');
  }
}

// 사용 예
fetchDataWithTimeout(1000)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

위 코드에서 fetchDataWithTimeout 함수는 Promise.race()를 사용하여 데이터를 가져오는 작업과 타임아웃을 비교하고, 지정된 시간 내에 작업이 완료되지 않으면 타임아웃 에러를 반환합니다.

결론

TypeScript에서 비동기 작업에 대한 타임아웃은 Promise.race()를 활용하여 설정할 수 있습니다. 이를 통해 비동기 작업의 제한 시간을 설정하고, 타임아웃 시 적절히 처리할 수 있습니다.

위와 같은 방식을 통해 안정적으로 비동기 작업을 수행하고, 예기치 않은 대기 시간을 방지할 수 있습니다.

참고문헌: