AbortController AbortController Request Cancellation
Last updated: 2026-11-02
AbortController AbortController Request Cancellation
AbortController is a native browser API: pass its signal to fetch and call abort() to cancel the request halfway. Unmounting a component, changing a parameter and debouncing a search all benefit from it - cancelling outdated requests saves bandwidth and, more importantly, avoids the race where a stale response overwrites fresh data that has already been rendered. The same controller can also abort many requests at once, so one cleanup routine covers every in-flight call a component started.
| Group | Data & Engineering |
|---|---|
| Kind | API |
| Since | Native browser API (DOM Living Standard) |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const ctrl = new AbortController()
fetch('/api/search?q=' + kw, { signal: ctrl.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') return // cancelled on purpose, not an error
showError(err)
})
ctrl.abort() // triggers it: fetch rejects with an AbortError⚙️ Parameters
| signal | The AbortSignal instance, passed to fetch as options.signal; the same signal can drive several requests and cancel all of them at once. |
|---|
Returns：The constructor returns { signal, abort() }: the signal is what fetch listens to, abort() triggers the cancellation and the request rejects with an AbortError.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking "Send request" enters the loading state; click "Cancel request" before the response arrives and the state becomes aborted instead of error - a cancelled request never updates the UI.💡 Key Points
🏷️ More Data & Engineering
💡 Related Cases
📚 Related Tutorials
❓ FAQ
