🛑 AbortController: Canceling Async Operations in JavaScript

AbortController is a built-in Web API that allows you to cancel asynchronous operations, especially ones that support an AbortSignal, like fetch, streams, or custom async tasks.

💡 Core Concepts

1. AbortController

• Creates a controller with a .signal object.
• You call .abort() to cancel the operation.

2. AbortSignal

• Passed to the async operation.
• Has .aborted boolean flag and emits an abort event.

🧪 Example: Cancel fetch

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

fetch('https://api.example.com/data', { signal })
  .then(res => res.json())
  .then(console.log)
  .catch(err => {
    if (err.name === 'AbortError') console.log('Fetch canceled');
    else console.error(err);
  });

// Cancel after 100ms
setTimeout(() => controller.abort(), 100);

📦 Common Use Cases

🧠 Example in Custom Code

Create a wait(ms) function that supports cancellation via AbortController.

function wait(ms, signal) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(() => resolve("done"), ms);
    signal?.addEventListener("abort", () => {
      clearTimeout(timeout);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

Here’s a precise, fetch-cancelable promise implementation using AbortController :

✅ Cancelable Fetch with AbortController

function fetchWithCancel(url, options = {}) {
  const controller = new AbortController();
  const signal = controller.signal;

  const fetchPromise = fetch(url, { ...options, signal });

  return {
    promise: fetchPromise,
    cancel: () => controller.abort()
  };
}

🧪 Example:

const { promise, cancel } = fetchWithCancel('https://jsonplaceholder.typicode.com/posts/1');

promise
  .then(res => res.json())
  .then(data => console.log('Fetched:', data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch canceled');
    } else {
      console.error('Error:', err);
    }
  });

// Cancel after 100ms
setTimeout(cancel, 100);

✅ Behavior:

• Uses AbortController to terminate the underlying fetch request.
• If canceled, fetch rejects with AbortError.
• Unlike makeCancelable, this actually stops the request .

⚠️ Works With:

• fetch
• Some APIs like ReadableStream, Request, WebSocket (in newer specs)

Let me know if you want a generic wrapper that adds cancelation to any async operation (not just fetch).