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 an asynchronous operation is done using an AbortSignal object.

Constructor

AbortController()

Creates a new AbortController object instance.

Instance properties

AbortController.signal Read only

Returns an AbortSignal object instance, which can be used to communicate with, or to abort, an asynchronous operation.

Instance methods

AbortController.abort()

Aborts an asynchronous operation before it has completed. This is able to abort fetch requests, consumption of any response bodies, and streams.

Examples

Note: There are additional examples in the AbortSignal reference.

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
let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("Download aborted");
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  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 a DOMException named AbortError.

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

Specifications

Specification
DOM Standard
# interface-abortcontroller

Browser compatibility

BCD tables only load in the browser

See also