AbortSignal
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.
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
BCD tables only load in the browser
See also
- Fetch API
- Abortable Fetch by Jake Archibald