The abort()
method of the AbortController
interface aborts a DOM request before it has completed. This is able to abort fetch requests, the consumption of any response bodies, or streams.
The abort()
method of the AbortController
interface aborts a DOM request before it has completed. This is able to abort fetch requests, the consumption of any response bodies, or streams.
js
abort() abort(reason)
reason
Optional
The reason why the operation was aborted, which can be any JavaScript value. If not specified, the reason is set to "AbortError" DOMException
.
None (undefined
).
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 (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.
js
const controller = new AbortController(); const signal = controller.signal; const url = "video.mp4"; const downloadBtn = document.querySelector(".download"); const abortBtn = document.querySelector(".abort"); downloadBtn.addEventListener("click", fetchVideo); abortBtn.addEventListener("click", () => { controller.abort(); console.log("Download aborted"); }); function fetchVideo() { fetch(url, { signal }) .then((response) => { console.log("Download complete", response); }) .catch((err) => { console.error(`Download error: ${err.message}`); }); }
Note: When abort()
is called, the fetch()
promise rejects with an Error
of type DOMException
, with name AbortError
.
You can find a full working example on GitHub; you can also see it running live.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
abort |
66 | 16 | 57 | No | 53 | 12.111.1Even thoughwindow.AbortController is defined, it doesn't really abort fetch requests. See bug 174980. |
66 | 66 | 57 | 47 | 12.211.3Even thoughwindow.AbortController is defined, it doesn't really abort fetch requests. See bug 174980. |
9.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort