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).

Event handlers

AbortSignal.onabort

Invoked when an abort event fires, i.e. when the DOM request(s) the signal is communicating with is/are aborted.

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;
  })
}

You can find a full working example on GitHub — see abort-api (see it running live also).

Specifications

Browser compatibility

See also

• Fetch API
• Abortable Fetch by Jake Archibald