Fetch: Abort

As we know, fetch returns a promise. And JavaScript generally has no concept of “aborting” a promise. So how can we cancel an ongoing fetch? E.g. if the user actions on our site indicate that the fetch isn’t needed any more. There’s a special built-in object for such purposes: AbortController. It can be used to abort not only fetch, but other asynchronous tasks as well. The usage is very straightforward:

The AbortController object

Create a controller: A controller is an extremely simple object. - It has a single method abort(), - And a single property signal that allows to set event listeners on it. When abort() is called: - controller.signal emits the “abort” event. - controller.signal.aborted property becomes true. Generally, we have two parties in the process: 1. The one that performs a cancelable operation, it sets a listener on controller.signal. 2. The one that cancels: it calls controller.abort() when needed. Here’s the full example (without fetch yet): As we can see, AbortController is just a mean to pass abort events when abort() is called on it. We could implement the same kind of event listening in our code on our own, without the AbortController object. But what’s valuable is that fetch knows how to work with the AbortController object. It’s integrated in it.

Using with fetch

To be able to cancel fetch, pass the signal property of an AbortController as a fetch option: The fetch method knows how to work with AbortController. It will listen to abort events on signal. Now, to abort, call controller.abort(): We’re done: fetch gets the event from signal and aborts the request. When a fetch is aborted, its promise rejects with an error AbortError, so we should handle it, e.g. in try..catch. Here’s the full example with fetch aborted after 1 second:

AbortController is scalable

AbortController is scalable. It allows to cancel multiple fetches at once. Here’s a sketch of code that fetches many urls in parallel, and uses a single controller to abort them all: If we have our own asynchronous tasks, different from fetch, we can use a single AbortController to stop those, together with fetches. We just need to listen to its abort event in our tasks:

Summary

• AbortController is a simple object that generates an abort event on its signal property when the abort() method is called (and also sets signal.aborted to true).
• fetch integrates with it: we pass the signal property as the option, and then fetch listens to it, so it’s possible to abort the fetch.
• We can use AbortController in our code. The “call abort()” -> “listen to abort event” interaction is simple and universal. We can use it even without fetch.

let controller = new AbortController();