TypeScript
Public
Abortable Fetch with Timeout
Cancel a slow fetch request with AbortController while preserving the caller signal.
#typescript
#fetch
#abortcontroller
#error-handling
TypeScript
type FetchWithTimeoutOptions = RequestInit & {
timeoutMs?: number;
};
export async function fetchWithTimeout(
input: RequestInfo | URL,
options: FetchWithTimeoutOptions = {},
): Promise<Response> {
const {
timeoutMs = 8000,
signal: callerSignal,
...requestOptions
} = options;
const timeoutController = new AbortController();
const timeoutId = window.setTimeout(() => {
timeoutController.abort(
new DOMException('Request timed out.', 'TimeoutError'),
);
}, timeoutMs);
const signal = callerSignal
? AbortSignal.any([
callerSignal,
timeoutController.signal,
])
: timeoutController.signal;
try {
return await fetch(input, {
...requestOptions,
signal,
});
} finally {
window.clearTimeout(timeoutId);
}
}
