What does AbortController do?

JavaScriptJunior~1 min read

What AbortController does

AbortController is a special object that lets you create a "cancellation signal" (AbortSignal) and send a "cancel" command to asynchronous operations that listen to it.

In simpler terms:

AbortController manages the "canceled or not" state, while AbortSignal is the "flag" that asynchronous code can watch.

Example of basic usage with fetch

javascript

const controller = new AbortController(); // create a controller
const signal = controller.signal;          // get the signal from it

fetch('https://example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('The request was canceled');
    } else {
      console.error('Error:', err);
    }
  });

// Cancel the request after 1 second:
setTimeout(() => {
  controller.abort(); // cancellation
}, 1000);

What happens:

We create a controller -> pass controller.signal into fetch.
When we call controller.abort(),

fetch is instantly interrupted,
an AbortError is thrown.

How it works internally

AbortController creates an object with two key properties:

signal is an AbortSignal object that can be passed into an asynchronous operation.
abort() is a method that activates this signal (changes its state and calls all handlers).

What AbortSignal does

AbortSignal:

Has a .aborted property (a boolean: true if the operation was canceled);
Can listen for the "abort" event:

javascript

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

signal.addEventListener('abort', () => {
  console.log('Operation canceled!');
});

controller.abort(); // => "Operation canceled!"

Where you can use it

AbortController is supported by many APIs:

API	Supports cancellation?
`fetch()`	Yes
`ReadableStream`, `WritableStream`	Yes
`WebSocket` (through a custom wrapper)	Partially
`setTimeout` / `setInterval` (via the AbortSignal API in Node 20+ or a browser polyfill)	Yes
`navigator.sendBeacon()` (in some browsers)	Partially
Your own async functions	Yes (if you implement support manually)

Example with Promise and custom cancellation

You can use the signal in your own asynchronous functions:

javascript

function wait(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(resolve, ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timeout);
      reject(new Error('Canceled by the user'));
    });
  });
}

const controller = new AbortController();
wait(5000, controller.signal)
  .then(() => console.log('5 seconds have passed'))
  .catch(err => console.log(err.message));

setTimeout(() => controller.abort(), 2000); // cancel after 2 sec

Result:

javascript

Canceled by the user

Reuse

The controller is single-use:

After controller.abort(), its signal permanently becomes .aborted = true.
To use it again, you need to create a new AbortController.

Summary

Property / method	What it does
`new AbortController()`	creates a controller
`.signal`	the signal to pass into an async API
`.abort()`	sends the "cancel" signal
`signal.aborted`	`true` if canceled
`signal.addEventListener('abort', fn)`	listens for the cancellation event

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.