AbortSignal Playground

Cancellation in modern JavaScript is one signal — AbortSignal — wired through fetch, addEventListener, streams, and timers. Pick a strategy (timeout, manual abort, race), wire up signals, and either run a live fetch() against a public endpoint or simulate a slow async task. The generated code uses AbortSignal.timeout() and AbortSignal.any() when they apply.

Strategy

Timeout (ms)

Task duration (ms)

Used when running the simulated task.

Run a real fetch() instead of a sleep simulation

Fetch URL

Try https://httpbin.org/delay/3 (3s) or https://httpbin.org/delay/1 (1s) to see timeouts succeed vs fail.

Extra signals (for any())

AbortSignal.timeout(ms) manual controller tab close (beforeunload)

All listed signals are combined with AbortSignal.any(). Whichever fires first wins, and reason tells you which.

Run log

Support: AbortController: all modern browsers + Node 15+. AbortSignal.timeout(): Chrome 103+, Safari 15.4+, Firefox 100+. AbortSignal.any(): Chrome 116+, Safari 17.4+, Firefox 124+ (early 2024).

Generated code

Cheat sheet

Manual abort: const ctrl = new AbortController(); fetch(url, { signal: ctrl.signal }); ctrl.abort(reason). The optional reason becomes signal.reason and the rejection value.
Time-bound request: fetch(url, { signal: AbortSignal.timeout(2000) }) — no controller bookkeeping, no leaked timer.
Race signals: AbortSignal.any([userCancel.signal, AbortSignal.timeout(5000)]) aborts on the first source to fire.
React/effects: create an AbortController in the effect, pass signal to async work, and call ctrl.abort() in the cleanup return.
Detecting cancellation: aborted requests reject with a DOMException named "AbortError". Check err.name === 'AbortError' or compare signal.reason.
Beyond fetch: addEventListener('scroll', fn, { signal }) auto-removes the listener when the signal aborts. Same with streams, observers, and many Node APIs.