Cancellation with AbortController

## The problem it solves JavaScript's asynchronous primitives — promises and async functions — describe *results*, not *operations*. Once you have a promise, you have a handle to a value that will arrive; there is nothing on it that says "stop doing the work behind this". `AbortController` fills that gap with a small, standard, out-of-band signalling channel that any API can choose to accept. It is not part of ECMAScript itself — it comes from the WHATWG DOM standard — but it is available as a global in modern browsers and in Node, and it is the answer interviewers expect to "how do you cancel an in-flight operation?". ## The two halves ```js const controller = new AbortController(); const signal = controller.signal; // an AbortSignal ``` - **`AbortController`** is the *trigger* side. It has exactly one method, `abort(reason)`, and one property, `signal`. You keep the controller in the code that decides when to give up. - **`AbortSignal`** is the *observe* side. It has no `abort()` method — a consumer that holds a signal can watch cancellation but never cause it. That asymmetry is the whole design: you can safely hand a signal to library code without giving it the power to cancel your work. The signal exposes: - `signal.aborted` — a boolean, `false` until aborted, then permanently `true`. - `signal.reason` — `undefined` until aborted, then whatever value was passed to `abort()`. - `signal.throwIfAborted()` — throws `signal.reason` if aborted, otherwise returns quietly. - an `abort` event, since `AbortSignal` is an `EventTarget`; you can use `addEventListener('abort', fn)` or the `signal.onabort` property. ## What abort() actually does ```js const controller = new AbortController(); const { signal } = controller; signal.addEventListener('abort', () => { console.log('stopping because:', signal.reason); }, { once: true }); controller.abort('user navigated away'); console.log(signal.aborted); // true console.log(signal.reason); // 'user navigated away' ``` The state change and the event dispatch happen **synchronously** inside the `abort()` call — by the time `abort()` returns, every `abort` listener has already run. The event fires at most once, and the state is a one-way latch: there is no `reset()`, no un-abort. Calling `controller.abort()` again after the signal is aborted is a silent no-op, which is why abort-on-cleanup code can run unconditionally without guards. If you call `abort()` with no argument, the reason defaults to a `DOMException` whose `name` is `"AbortError"`. If you pass your own value — a string, an `Error`, an object — it is stored verbatim and rethrown verbatim by `throwIfAborted()`. ## Opting in Nothing is cancelled automatically. An operation is abortable only because its author wrote code that looks at the signal: checking `aborted` at the start, subscribing to the `abort` event, and rejecting the promise with `signal.reason` when it fires. That is why the standard convention is an options bag — `doWork(input, { signal })` — and why an API that doesn't document a `signal` option will simply ignore one you pass. ## Pre-made signals Two static helpers produce signals without a controller: ```js AbortSignal.abort('too late'); // already-aborted signal, useful in tests and fast paths AbortSignal.timeout(5000); // aborts itself after 5s, reason is a TimeoutError DOMException ``` Because neither hands you a controller, nothing else can abort them; they abort on their own terms. ## One controller, many operations A single signal can be passed to any number of operations. That is the idiomatic teardown pattern: one controller per component, request, or page view; every operation started in that scope receives the same signal; one `abort()` call at teardown time stops the whole group. The flip side is granularity — if you need to cancel just one of them, that one needs its own controller. ## What it does not do `abort()` signals intent; it does not preempt anything. Synchronous code already running keeps running to completion, side effects already committed stay committed, and an operation that never looks at the signal is unaffected. Cancellation in JavaScript is cooperative by construction, and `AbortController` is only the notification channel.