Why 80% of Front‑End Developers Miss the Full Power of AbortController

Many developers only use AbortController to cancel axios requests, but the API offers far broader capabilities.

Basic usage

The controller provides two properties: signal (the abort token) and abort (the method that triggers cancellation.

Abort request & request timeout

When calling fetch, you can pass controller.signal to enable cancellation. For automatic timeouts you can use AbortSignal.timeout(ms), which creates a signal that aborts after the specified milliseconds.

Event‑listener abort

Event listeners can be aborted by supplying a signal option in addEventListener. Multiple AbortController instances can cancel different listeners, or a single instance can cancel all listeners at once.

Publish‑subscribe with AbortController

The abort event emitted by controller.signal can be observed, allowing the controller to serve as a lightweight publish‑subscribe mechanism.

AbortSignal.any

When a cancellation condition depends on several controllers, you can combine their signals with AbortSignal.any, analogous to Promise.all / Promise.race / Promise.any, to create a single composite signal.

Compatibility