AbortController

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

You can create a new AbortController object using the AbortController() constructor. Communicating with a DOM request is done using an AbortSignal object.

Constructor

AbortController()

Creates a new AbortController object instance.

Properties

AbortController.signal Read only

Returns an AbortSignal object instance, which can be used to communicate with, or to abort, a DOM request.

Methods

AbortController.abort()

Aborts a DOM request before it has completed. This is able to abort fetch requests, consumption of any response bodies, and streams.

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 (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 a DOMException named AbortError.

You can find a full working example on GitHub; you can also see it running live.

Specifications

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
AbortController
66
16
57
No
53
12.1
11.1
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
66
66
57
47
12.2
11.3
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
9.0
AbortController
66
16
57
No
53
12.1
11.1
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
66
66
57
47
12.2
11.3
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
9.0
abort
66
16
57
No
53
12.1
11.1
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
66
66
57
47
12.2
11.3
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
9.0
signal
66
16
57
No
53
12.1
11.1
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
66
66
57
47
12.2
11.3
Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
9.0

See also

© 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/AbortController