Defining timeouts with the Fetch API

  • javascript

Nowadays, defining timeouts is very simple. You just need to call the .timeout() static method of AbortSignal. Let’s see how it works.

const response = fetch(url, {
  signal: AbortSignal.timeout(2000) // 2 seconds
});

If the request’s response is faster than the defined timeout, fetch works as usual.

Exception Handling

When the timeout is reached, fetch throws a TimeoutError.

try {
    await fetch(url, {
        signal: AbortSignal.timeout(0)
    });
} catch (err) {
    if (err.name === 'TimeoutError') {
        // you can handle the timeout exception here
    }
}

Browser Support

AbortSignal: timeout() has pretty solid browser support. Currently (2025/03/06), approximately 93% of browsers support this feature.

Extra: Approach with AbortController.abort()

AbortController: abort() allows you to abort a request for any reason, not only related to timeouts. Since I’m presenting timeout approaches, let’s look at how to handle it with .abort().

const abortController = new AbortController()
const timeoutId = setTimeout(
    () => abortController.abort(), 
    2000, // 2 seconds
)

try {
    await fetch(url, { signal: abortController.signal })
    clearTimeout(timeoutId)
} catch (err) {
    if (err.name === 'AbortError') {
        // you can handle the timeout exception here
    }
}

As I mentioned, you can use .abort() for any reason. For example, to cancel a request on button click:

const button = document.querySelector('button')
const abortController = new AbortController()

button.onclick = () => abortController.abort() // `addEventListener` is better but `onclick` is shorter for presentation purposes.

try {
    fetch(url, { signal: abortController.signal }) // `await` is skipped, so `button.click()` is faster
    button.click()
} catch (err) {
    if (err.name === 'AbortError') {
        // you can handle the abort exception here
    }
}

Bibliography