JavaScript Academy · Lesson

Aborting Requests with AbortController

Cancel in-flight requests cleanly.

Lesson 4 of 413 steps

Aborting Requests with AbortController is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Aborting Requests with AbortController” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Aborting Requests with AbortController”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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