The AbortSignal.timeout()
static method returns an AbortSignal
that will automatically abort after a specified time.
The signal aborts with a TimeoutError
DOMException
on timeout, or with AbortError
DOMException
due to pressing a browser stop button (or some other inbuilt "stop" operation). This allow UIs to differentiate timeout errors, which typically require user notification, from user-triggered aborts that do not.
The timeout is based on active rather than elapsed time, and will effectively be paused if the code is running in a suspended worker, or while the document is in a back-forward cache ("bfcache").
Note: At time of writing there is no way to combine multiple signals. This means that you can't directly abort a download using either a timeout signal or by calling AbortController.abort()
.
AbortSignal.timeout(time)
An AbortSignal
.
The signal will abort with its AbortSignal.reason
property set to a TimeoutError
DOMException
on timeout, or an AbortError
DOMException
if the operation was user-triggered.
A simple example showing a fetch operation that will timeout if unsuccessful after 5 seconds, is shown below. Note that this may also fail if the method is not supported, if a browser "stop" button is pressed, or for some other reason.
const url = "https://path_to_large_file.mp4";
try {
const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
const result = await res.blob();
} catch (err) {
if (err.name === "TimeoutError") {
console.error("Timeout: It took more than 5 seconds to get the result!");
} else if (err.name === "AbortError") {
console.error(
"Fetch aborted by user action (browser stop button, closing tab, etc.",
);
} else if (err.name === "TypeError") {
console.error("AbortSignal.timeout() method is not supported");
} else {
console.error(`Error: type: ${err.name}, message: ${err.message}`);
}
}