Promissa saysAbortController cancels a fetch (or any abortable API) via a signal.
Create const c = new AbortController(), pass c.signal to fetch(url, { signal }), and call c.abort() to cancel — the fetch rejects with an AbortError. Essential for cancelling stale requests (a new search supersedes the old) and for timeouts (AbortSignal.timeout(ms)).
Power-ups you unlock
new AbortController() → signal + abort()
Pass signal to fetch(url, { signal })
abort() rejects the fetch with AbortError
Cancel stale requests; AbortSignal.timeout for timeouts
Race Condition Rex attacks — common mistakes
Not catching the AbortError separately
Reusing an aborted controller (make a new one)
Leaking requests by never cancelling stale ones
Boss battleSketch cancelling a fetch with AbortController and handling the AbortError.
Example code
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>const c = new AbortController();
fetch(url, { signal: c.signal })
.catch(e => { if (e.name === 'AbortError') console.log('cancelled'); });
c.abort(); // cancels the request</pre></body></html>