AbortController creates an AbortSignal that can be used to cancel asynchronous operations. The signal is a one-way communication channel: once aborted, it stays aborted.
Checking...Checking...Checking...
AbortSignal
active
aborted: false
reason: undefined
Basic demo log...
Signal Event Listeners
Event log...
Code Pattern
const controller = new AbortController();
const signal = controller.signal;
signal.addEventListener('abort', () => {
console.log('Aborted!', signal.reason);
});
// Pass signal to async operations
fetch(url, { signal });
addEventListener('click', handler, { signal });
// Later: cancel everything
controller.abort('User cancelled');
AbortSignal.timeout()
Creates a signal that automatically aborts after a specified duration. The reason is set to a TimeoutError DOMException.
Timeout Demo
0%
Timeout results...
Practical: Timeout with Fetch
Fetch timeout results...
AbortSignal.any() Combinator
Combines multiple signals - aborts when ANY of them abort. Perfect for combining user cancellation with timeout.
User Cancel + Timeout
User Signal
idle
+
Timeout Signal
idle
=
Combined
idle
Any combinator results...
Multiple Sources
Multi-signal results...
Fetch Cancellation with Progress
Cancel in-flight fetch requests. The browser actually cancels the network request, not just ignoring the response.
Simulated Download with Cancel
0%
Download log...
Retry with Abort
Automatically cancel previous request when a new one starts.
Search log (type above)...
Multiple Concurrent Requests Cancellation
Cancel all in-flight requests with a single controller, or cancel them individually.
Cancel All Pattern
Concurrent request log...
Individual Cancellation
Individual request log...
Event Listener Cleanup with Signal
Use AbortSignal to automatically remove event listeners. No need to keep references to handler functions.
Click Counter (auto-cleanup)
Clicks: 0
Listener log...
Multiple Listeners, One Cleanup
Register multiple event types with a single signal. Abort once to remove all.
Multi-listener log...
Code Pattern
const controller = new AbortController();
// Register multiple listeners with same signal
el.addEventListener('click', onClick, { signal: controller.signal });
el.addEventListener('keydown', onKey, { signal: controller.signal });
window.addEventListener('resize', onResize, { signal: controller.signal });
// One call removes ALL listeners
controller.abort();
// No need for removeEventListener!
AbortSignal.reason Inspection
The reason property tells you WHY an abort happened. It can be any value: string, Error, DOMException, or custom object.
Different Reason Types
Reason inspection results...
Reason-based Error Handling
Error handling results...
throwIfAborted()
throwIfAborted results...
Race Condition Handling Patterns
AbortSignal prevents stale responses from overwriting fresh data. Critical for search-as-you-type and similar patterns.