AbortController is the standard way to cancel an in-flight fetch (and other abortable APIs).

The mechanism

const controller = new AbortController();

fetch("/api/data", { signal: controller.signal })
  .then((res) => res.json())
  .then((data) => { /* use data */ })
  .catch((err) => {
    if (err.name === "AbortError") return; // expected — ignore it
    throw err;                              // real error
  });

// cancel it:
controller.abort();

• new AbortController() gives you a controller and a controller.signal.
• Pass signal to fetch (and to anything else that supports it — addEventListener, axios, etc.).
• controller.abort() aborts: the fetch promise rejects with an AbortError.
• A controller is single-use — once aborted, make a new one for the next request.

Catch the AbortError

An aborted fetch rejects — so you must catch and explicitly ignore AbortError, or it looks like a real failure (error toast, etc.).

The React pattern — abort in cleanup

This is the main reason it comes up. In a useEffect that fetches, abort the request in the cleanup function:

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then((r) => r.json())
    .then(setResults)
    .catch((e) => { if (e.name !== "AbortError") setError(e); });

  return () => controller.abort(); // cancel on unmount OR when query changes
}, [query]);

This solves two real bugs:

1. setState-after-unmount — if the component unmounts before the response, the request is cancelled instead of resolving into a dead component.
2. Out-of-order responses (race condition) — when query changes fast, each new effect run aborts the previous request, so a slow old response can't overwrite a newer one.

More

• Timeouts — AbortSignal.timeout(5000) aborts automatically after 5s.
• Combine signals — AbortSignal.any([...]) to abort on whichever fires first.
• One controller, many requests — passing the same signal to several fetches cancels them all together.

The framing

"Make an AbortController, pass its signal to fetch, call abort() to cancel — the fetch then rejects with an AbortError you catch and ignore. The big use is in React: abort in the useEffect cleanup, which both prevents setState-after-unmount and kills the out-of-order-response race when a dependency changes rapidly. Controllers are single-use, and AbortSignal.timeout gives you cancellation-by-timeout for free."