Setting request timeouts with AbortController
The Fetch API doesn't have a built-in timeout option. You need to use
AbortController combined with setTimeout to implement timeouts.
This is important for user experience — you don't want users waiting indefinitely for a response that may never come.
async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
const controller = new AbortController();
// Set up the timeout
const timeoutId = setTimeout(() => {
controller.abort();
}, timeoutMs);
try {
const response = await fetch(url, {
...options,
signal: controller.signal
});
clearTimeout(timeoutId); // Request completed, cancel timeout
return response;
} catch (error) {
clearTimeout(timeoutId);
if (error.name === 'AbortError') {
throw new Error(`Request timed out after ${timeoutMs}ms`);
}
throw error;
}
}
// Usage
try {
const response = await fetchWithTimeout('/api/data', {}, 3000);
const data = await response.json();
} catch (error) {
console.error(error.message); // "Request timed out after 3000ms"
}
The AbortController.signal is passed to fetch. When abort()
is called, the fetch Promise rejects with an AbortError.
// Modern approach (Chrome 103+, Firefox 100+, Safari 16+)
async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
try {
const response = await fetch(url, {
...options,
signal: AbortSignal.timeout(timeoutMs)
});
return response;
} catch (error) {
if (error.name === 'TimeoutError') {
throw new Error(`Request timed out after ${timeoutMs}ms`);
}
if (error.name === 'AbortError') {
throw new Error('Request was cancelled');
}
throw error;
}
}
AbortSignal.timeout() is a newer API that handles the timeout automatically.
It throws a TimeoutError instead of AbortError.
// Allow both timeout AND manual cancellation
function createFetchController(timeoutMs = 5000) {
const controller = new AbortController();
const timeoutSignal = AbortSignal.timeout(timeoutMs);
// Combine signals: abort if either fires
const combinedSignal = AbortSignal.any([
controller.signal,
timeoutSignal
]);
return {
signal: combinedSignal,
abort: () => controller.abort()
};
}
// Usage
const { signal, abort } = createFetchController(5000);
// Cancel if user navigates away
window.addEventListener('beforeunload', abort);
const response = await fetch('/api/data', { signal });