AbortSignal
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.
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.
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
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()
, 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
" DOMException
.
You can find a full working example on GitHub; you can also see it running live.
Specifications
Specification |
---|
DOM Standard # interface-AbortSignal |
Browser compatibility
BCD tables only load in the browser
See also
- Fetch API
- Abortable Fetch by Jake Archibald