AbortController

AbortController and AbortSignal cancel in-progress asynchronous operations. Create a controller, pass its signal to an operation (such as fetch()), and call abort() to cancel it. Every listener of the signal’s abort event runs, and operations watching the signal reject with an "AbortError".

  • new AbortController() creates a controller.
  • controller.signal is the AbortSignal to hand to operations.
  • controller.abort() fires the signal: the abort event runs and signal.aborted becomes true.
  • signal.aborted reports whether the signal has fired.
  • signal.addEventListener("abort", listener) (and the other EventTarget methods) register listeners; they can be removed with removeEventListener().

Usage#

Cancelling a fetch after a timeout:

const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener("abort", () => {
  console.log("request cancelled");
});

setTimeout(() => controller.abort(), 5000);

try {
  const response = await fetch("https://example.com/slow", { signal });
} catch (err) {
  if (err.name === "AbortError") {
    console.log("timed out");
  }
}

Coordinating cancellation of several operations with one signal:

const controller = new AbortController();
const signal = controller.signal;

const results = Promise.all([
  fetch("https://example.com/a", { signal }),
  fetch("https://example.com/b", { signal }),
]);

// cancel both:
controller.abort();

Differences from the standard#

  • controller.abort() takes no effect if given a reason; there is no signal.reason property. Signals simply become aborted.
  • AbortSignal.abort(), AbortSignal.timeout(), and AbortSignal.any() are not available.

Documentation#