Aborting a fetch request February 9, 2020 • 1 min read • Tweet

TLDR: AbortController is used to abort a fetch request. Check out this demo.

As of today, there are two primary ways to make a request in the browser. XMLHttpRequest and fetch . XMLHttpRequest existed in browsers for a long time. the fetch was introduced with ES6 .

XMLHttpRequest was always abortable. An abortable XHR request looks something like this.

let xhr = new XMLHttpRequest ( ) ; xhr . method = 'GET' ; xhr . url = 'https://slowmo.glitch.me/5000' ; xhr . open ( method , url , true ) ; xhr . send ( ) ; abortButton . addEventListener ( 'click' , function ( ) { xhr . abort ( ) ; } ) ;

fetch wasn’t abortable when it was initially introduced. the initial GitHub issue for aborting a fetch request was opened initially in 2015. There were also many attempts to solve this problem outside of the fetch spec like cancelable-promises and other hacks.

But, we now finally have the generic AbortController and the AbortSignal APIs. These APIs are provided by the DOM standard, not by the language itself.

What is an AbortController?

Abort controller in the devtool

As described in the DOM spec documentation

Though promises do not have a built-in aborting mechanism, many APIs using them require abort semantics. AbortController is meant to support these requirements by providing an abort() method that toggles the state of a corresponding AbortSignal object. The API which wishes to support aborting can accept an AbortSignal object, and use its state to determine how to proceed.

const controller = new AbortController ( ) ; const signal = controller . signal ; signal . addEventListener ( 'abort' , ( ) => { console . log ( signal . aborted ) ; } ) ; controller . abort ( ) ;

How to abort fetch request using AbortController?

fetch accepts AbortSignal as part of the second argument.

const controller = new AbortController ( ) ; const signal = controller . signal ; fetch ( 'https://slowmo.glitch.me/5000' , { signal } ) . then ( r => r . json ( ) ) . then ( response => console . log ( response ) ) . catch ( err => { if ( err . name === 'AbortError' ) { console . log ( 'Fetch was aborted' ) ; } else { console . error ( 'Oops!' , err ) ; } } ) ; setTimeout ( ( ) => { controller . abort ( ) ; } , 2000 ) ;

Aborting the fetch aborts both the request and response. The request fails with the error new DOMException('Aborted', 'AbortError') .

The same AbortSignal ( signal in the above example) can be used to abort multiple fetch requests.

Aborted fetch request in the devtool

Demo

AbortController is not only for fetch. it’s a generic API to abort asynchronous tasks. Eg: You can use it to implement a cancelable promise.

Browser support and polyfill

Many older browsers don’t support the AbortController and the AbortSignal APIs. You can use either of these polyfills to make it work.

https://www.npmjs.com/package/abort-controller https://www.npmjs.com/package/abortcontroller-polyfill

That’s it for now. If you enjoyed reading this post, give me a follow @ganapativs 😬

References:

Thanks: