Implementing Timeout with Promises in JavaScript

Implementing Timeout with Promises in JavaScript

Implementing a timeout is a common use case for Promise.race. Here is how to do it robustly.

Basic Timeout

function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error("timeout")), ms)
  );
  return Promise.race([promise, timeout]);
}

const result = await withTimeout(fetch("/api"), 5000);
``
If `fetch` takes more than 5 seconds, the timeout rejects first, and the race rejects.

### Custom Timeout Error

```js
class TimeoutError extends Error {
  constructor(ms) {
    super(`Operation timed out after ${ms}ms`);
    this.name = "TimeoutError";
  }
}

function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) => setTimeout(() => reject(new TimeoutError(ms)), ms)),
  ]);
}
``
### Timeout with AbortController (Cancelling the Fetch)

```js
async function fetchWithTimeout(url, ms) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), ms);
  try {
    const res = await fetch(url, { signal: controller.signal });
    return res;
  } finally {
    clearTimeout(timeout);
  }
}
``
This actually cancels the fetch (not just races it). The `AbortController` aborts the fetch request.

### Timeout for Any Promise

```js
async function withTimeout(promise, ms) {
  let timer;
  const timeout = new Promise((_, reject) => {
    timer = setTimeout(() => reject(new Error("timeout")), ms);
  });
  try {
    const result = await Promise.race([promise, timeout]);
    clearTimeout(timer);
    return result;
  } catch (err) {
    clearTimeout(timer);
    throw err;
  }
}
``
This clears the timer whether the promise resolves or rejects (no memory leak).

### The Takeaway

Implement timeout with `Promise.race` (race the operation against a timeout promise). Use `AbortController` to actually cancel `fetch` (not just race). Use `clearTimeout` to clean up the timer (avoid memory leaks). Create a custom `TimeoutError` for specific error handling.