AbortController()

Creates a newAbortController object instance.

AbortController.signalRead only

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

AbortController.abort()

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

In the following snippet, we aim to download a video using theFetch API.

We first create a controller using theAbortController() constructor, then grab a reference to its associatedAbortSignal object using theAbortController.signal property.

When thefetch request is initiated, we pass in theAbortSignal 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 callingAbortController.abort(), as seen below in the second event listener.

Whenabort() is called, thefetch() promise rejects with aDOMException namedAbortError.

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");  }});async function fetchVideo() {  controller = new AbortController();  const signal = controller.signal;  try {    const response = await fetch(url, { signal });    console.log("Download complete", response);    // process response further  } catch (err) {    console.error(`Download error: ${err.message}`);  }}

If the request is aborted after thefetch() call has been fulfilled but before the response body has been read, then attempting to read the response body will reject with anAbortError exception.

async function get() {  const controller = new AbortController();  const request = new Request("https://example.org/get", {    signal: controller.signal,  });  const response = await fetch(request);  controller.abort();  // The next line will throw `AbortError`  const text = await response.text();  console.log(text);}

You can find afull working example on GitHub; you can also see itrunning live.

• Fetch API
• Abortable Fetch by Jake Archibald