💻 Dev

🛠️ 처음부터 만드는 Promise Timeout — API 호출에 타임아웃 추가하는 12줄 구현

네트워크 요청이나 비동기 작업이 응답 없이 멈출 수 있다. 타임아웃으로 이를 방지하자.

기본 구현 (12줄)


```typescript
function withTimeout(
promise: Promise,
ms: number
): Promise {
return Promise.race([
promise,
new Promise((_, reject) =>
setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms)
)
]);
}
```

사용


```typescript
// 5초 타임아웃으로 API 요청
const data = await withTimeout(
fetch('/api/data').then(r => r.json()),
5000
);
// 실패 시 처리
try {
await withTimeout(slowAPI(), 3000);
} catch (e) {
if (e.message.includes('Timeout')) {
console.log('요청이 너무 오래 걸렸습니다');
}
}
```

Promise.race의 비결


`Promise.race()`는 먼저 완료되는 Promise를 반환한다. 타임아웃 Promise가 이기면 reject된다.
더 실전적으로는 AbortController 사용:
```typescript
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
fetch('/api/data', { signal: controller.signal });
```

참고


  • [MDN: Promise.race()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race)

  • [MDN: AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
  • 💬 0
    👁 0 views

    Comments (0)

    💬

    No comments yet.

    Be the first to comment!