JavaScript Academy · Lesson

Aborting Requests with AbortController

Cancel in-flight requests cleanly.

Aborting Requests with AbortController is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Cancel a Request

Sometimes you start a request you no longer need: the user navigates away, types a new search, or a timeout elapses. AbortController lets you cancel an in-flight fetch.

Creating a Controller

Make an AbortController. It exposes a signal you pass to fetch and an abort() method to cancel.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Passing the Signal

Give the controller signal to fetch via the options object. The request is now cancelable.

fetch(url, { signal: controller.signal });

Calling abort

Call controller.abort() to cancel. The pending fetch Promise rejects with an AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Catching the AbortError

Distinguish a deliberate cancel from a real failure by checking err.name === "AbortError" in your catch.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Timeout Pattern

Combine with setTimeout to abort slow requests automatically. Clear the timer if the request finishes first.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Built-In Timeout Helper

Modern environments offer AbortSignal.timeout(ms), which returns a signal that auto-aborts. It is cleaner than wiring setTimeout yourself.

fetch(url, { signal: AbortSignal.timeout(5000) });

Cancel-Previous Search

For type-ahead search, abort the previous request before starting a new one. This prevents stale responses from overwriting fresh results.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

One Signal, Many Fetches

A single signal can abort multiple requests at once. Pass the same signal to several fetches and one abort() cancels them all.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Already-Aborted Signals

If a signal is already aborted when passed to fetch, the request rejects immediately. Check signal.aborted if you need to know its state.

if (controller.signal.aborted) console.log("already cancelled");

Cleanup on Unmount

In component-based UIs, abort outstanding requests when the component is destroyed to avoid setting state on something that no longer exists.

const controller = new AbortController();
// on teardown:
controller.abort();

Quick Check

Aborting fetch requests.

Recap

Create an AbortController, pass its signal to fetch, and call abort() to cancel. The Promise rejects with an AbortError you can detect by name. Use it for timeouts (AbortSignal.timeout), cancel-previous search, multi-request cancellation, and cleanup on teardown.

Frequently asked questions

Is the “Aborting Requests with AbortController” lesson free?

Yes — the full text of “Aborting Requests with AbortController” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Aborting Requests with AbortController”?

Cancel in-flight requests cleanly. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Aborting Requests with AbortController” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy