AbortController Interactive Demo

AbortController is a built-in browser API that lets you abort one or more asynchronous operations — such as fetch() requests, event listeners, streams, or custom async tasks. It provides an AbortSignal object that you pass to abortable APIs. When you call controller.abort(), all operations linked to that signal are immediately cancelled. This is far cleaner than older patterns like manually tracking and rejecting promises.

Pass the signal property into the fetch options:

const controller = new AbortController();
fetch('https://api.example.com/data', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Request was cancelled');
    }
  });

// Later, cancel the request:
controller.abort();

The fetch promise rejects with an AbortError DOMException when aborted.

AbortSignal.timeout(ms) is a static method (added in 2022) that creates a signal which automatically aborts after a specified number of milliseconds. This eliminates the need to manually create a controller and set up a setTimeout to call .abort(). Example:

// Auto-cancel after 3 seconds
fetch(url, { signal: AbortSignal.timeout(3000) });

Supported in Chrome 103+, Firefox 100+, Safari 16+.

Yes! One of the biggest advantages of AbortController is that you can pass the same signal to multiple fetch() calls (or other abortable operations). A single controller.abort() will cancel all of them at once. This is incredibly useful for cleanup in SPA frameworks — for example, aborting all in-flight requests when a component unmounts or a user navigates away. See Scene 3 above for a live demo.

Modern browsers support passing a signal option to addEventListener:

const controller = new AbortController();
element.addEventListener('click', handleClick, { signal: controller.signal });

// Later — removes ALL listeners linked to this signal:
controller.abort();

This is cleaner than removeEventListener because you don't need to keep a reference to the handler function. One abort() call can remove dozens of listeners at once. See Scene 4 above for a live demo.

When a fetch request is aborted, the promise rejects with a DOMException whose name property is 'AbortError'. You should always check for this in your catch blocks to distinguish intentional cancellations from actual network failures:

fetch(url, { signal })
  .catch(err => {
    if (err.name === 'AbortError') {
      // Intentional — do nothing or clean up
    } else {
      // Real error — show user a message
    }
  });

AbortError is not a real error — it indicates deliberate cancellation, not a problem.

• Search-as-you-type: Cancel the previous search request when the user types a new character, avoiding race conditions and wasted bandwidth.
• Component cleanup: In React, Vue, or Svelte, abort all pending requests when a component unmounts.
• File upload cancellation: Abort large uploads if the user clicks "cancel" or closes the modal.
• Request timeouts: Enforce a maximum wait time for API calls using AbortSignal.timeout().
• Event listener management: Clean up groups of event listeners in one call without storing handler references.
• Stream cancellation: Abort readable/writable streams and stop processing.

Yes, it's supported everywhere. AbortController is available in Chrome 66+, Firefox 57+, Safari 12.1+, and Edge 16+. The newer AbortSignal.timeout() static method is supported in Chrome 103+, Firefox 100+, and Safari 16+. The signal option in addEventListener has the same broad support as AbortController itself. For legacy browsers, a polyfill is available. In 2025, you can confidently use AbortController in production without transpilation for 98%+ of users.

Yes. Use signal.aborted (a boolean property) to check whether the signal has already been aborted:

if (controller.signal.aborted) {
  console.log('Already aborted, skipping operation.');
} else {
  fetch(url, { signal: controller.signal });
}

You can also listen for the abort event: signal.addEventListener('abort', callback).

No. Once controller.abort() is called, the signal is permanently aborted and cannot be reset. If you need to start a new batch of abortable operations, you must create a new AbortController instance. This is by design — it prevents accidentally reusing a stale signal. Each logical "group" of cancellable operations should get its own AbortController.