You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The AbortSignal
interface represents a signal object that allows you to communicate with a DOM request (such as a Fetch) and abort it if required via an AbortController
object.
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
).
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 request(s) the signal is communicating with is/are aborted.
Also available via theonabort
property.
Methods
The AbortSignal interface inherits methods from its parent interface, EventTarget
.
Examples
In the following snippet, we aim to download a video using the Fetch API.
We first create a 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 (see {signal}
, below). This associates the signal and controller with the fetch request and allows us to abort it by calling AbortController.abort()
, as seen below in the second event listener.
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
.
Current version of Firefox rejects the promise with a DOMException
You can find a full working example on GitHub — see abort-api (see it running live also).
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'AbortSignal' in that specification. |
Living Standard | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
AbortSignal | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
abort event | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
aborted | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
onabort | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
- Fetch API
- Abortable Fetch by Jake Archibald