The AbortSignal
interface represents a signal object that allows you to communicate with a DOM request (such as a fetch request) and abort it if required via an AbortController
object.
AbortSignal
Properties
The AbortSignal interface also inherits properties from its parent interface, EventTarget
.
-
AbortSignal.aborted
Read only -
A Boolean that indicates whether the request(s) the signal is communicating with is/are aborted (
true
) or not (false
). -
AbortSignal.reason
Read only -
A JavaScript value providing the abort reason, once the signal has aborted.
Methods
The AbortSignal
interface inherits methods from its parent interface, EventTarget
.
-
AbortSignal.throwIfAborted()
-
Throws the signal's abort
reason
if the signal has been aborted; otherwise it does nothing.
Static methods
-
AbortSignal.abort()
-
Returns an
AbortSignal
instance that is already set as aborted. -
AbortSignal.timeout()
-
Returns an
AbortSignal
instance that will automatically abort after a specified time.
Events
Listen to this event using addEventListener()
or by assigning an event listener to the oneventname
property of this interface.
-
abort
-
Invoked when the DOM requests the signal is communicating with is/are aborted. Also available via the
onabort
property.
Examples
Aborting a fetch operation using an explicit signal
The following snippet shows how we might use a signal to abort downloading a video using the Fetch API.
We first create an abort controller using the AbortController()
constructor, then grab a reference to its associated AbortSignal
object using the AbortController.signal
property.
When the fetch request is initiated, we pass in the AbortSignal
as an option inside the request's options object (the {signal}
below). This associates the signal and controller with the fetch request, and allows us to abort it by calling AbortController.abort()
. Below you can see that the fetch operation is aborted in the second event listener, which triggered when the abort button (abortBtn
) is clicked.
var controller = new AbortController(); var signal = controller.signal; var downloadBtn = document.querySelector('.download'); var abortBtn = document.querySelector('.abort'); downloadBtn.addEventListener('click', fetchVideo); abortBtn.addEventListener('click', function() { controller.abort(); console.log('Download aborted'); }); function fetchVideo() { ... fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { reports.textContent = 'Download error: ' + e.message; }) }
Note: When abort()
is called, the fetch()
promise rejects with an "AbortError
" DOMException
.
You can find a full working example on GitHub; you can also see it running live.
Aborting a fetch operation with a timeout
If you need to abort the operation on timeout then you can use the static AbortSignal.timeout()
method. This returns an AbortSignal
that will automatically timeout after a certain number of milliseconds.
The code snippet below shows how you would either succeed in downloading a file, or handle a timeout error after 5 seconds. Note that when there is a timeout the fetch()
promise rejects with a "TimeoutError
" DOMException
. This allows code to differentiate between timeouts (for which user notification is probably required), and user aborts.
try { const res = await fetch(url, { signal: AbortSignal.timeout(5000) }); const result = await res.blob(); // ... } catch (e) { if (e.name === "TimeoutError") { // Notify the user it took more than 5 seconds to get the result. } else if (e.name === "AbortError") { // fetch aborted by user action (browser stop button, closing tab, etc.) } else { // A network error, or some other problem. console.log(`Type: ${e.name}, Message: ${e.message}`) } }
Aborting a fetch with timeout or explicit abort
fetch()
isn't designed to combine multiple signals, so you can't abort a download "directly" due to either of AbortController.abort()
being called or an AbortSignal
timeout (though as in the preceding example, a timeout signal will abort if triggered by inbuilt browser mechanisms like a stop button).
To trigger on multiple signals they must be daisy chained. The code snippet below shows how you might call AbortController.abort()
in the handler for a separate timer.
try { const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 5000) const res = await fetch(url, { signal: controller.signal }) const body = await res.json() } catch (e) { if (e.name === "AbortError") { // Notify the user of abort. // Note this will never be a timeout error! } else { // A network error, or some other problem. console.log(`Type: ${e.name}, Message: ${e.message}`) } } finally { clearTimeout(timeoutId); }
Note: Unlike when using AbortSignal.timeout()
, there is no way to tell whether the final abort was caused by a timeout.
Specifications
Specification |
---|
DOM Standard # interface-AbortSignal |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
AbortSignal |
66
|
16
|
57
|
No
|
53
|
11.1
|
66
|
66
|
57
|
47
|
11.3
|
9.0
|
abort |
93
|
93
|
88
|
No
|
79
|
15
|
93
|
93
|
88
|
66
|
15
|
17.0
|
abort_event |
66
|
16
|
57
|
No
|
53
|
11.1
|
66
|
66
|
57
|
47
|
11.3
|
9.0
|
aborted |
66
|
16
|
57
|
No
|
53
|
11.1
|
66
|
66
|
57
|
47
|
11.3
|
9.0
|
reason |
98
|
98
|
97
|
No
|
No
|
No
|
98
|
98
|
97
|
No
|
No
|
No
|
throwIfAborted |
100
|
100
|
97
|
No
|
86
|
No
|
100
|
100
|
97
|
No
|
No
|
No
|
timeout |
No
|
No
|
100
|
No
|
No
|
No
|
98
|
No
|
100
|
No
|
No
|
No
|
See also
- Fetch API
- Abortable Fetch by Jake Archibald
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal