Interrupts a fetch request, mainly using AbortController.

Currently, data is obtained natively on the browser side, and requests are mainly made by XMLHttpRequest and FETCH. XMLHttpRequest is the elder generation, and FETCH is a more modern API introduced in ES6.

XMLHttpRequest is itself abort. Here is an example of an XHR interrupt

const xhr = new XMLHttpRequest()
xhr.method = 'GET'
xhr.url = 'https://slowmo.glitch.me/5000'
xhr.open(method, url, true)
xhr.send()

// Interrupt the request
abortButton.addEventListener('click', () => xhr.abort())
Copy the code

Fetch does not support interruption at the beginning of design. The developer mentioned “issue” on GitHub in 2015 in the open state, so that the developers tried to accommodate or solve this problem outside the FETCH specification. These include Cancelable – Promises and other hack methods.

However, there are now generic AbortController and AbortSignal apis that are provided by the DOM standard specification rather than by the language itself.

What is AbortController?

As stated in the DOM specification 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.

Although Promises have no built-in abort mechanism, many apis that use them require abort semantics. AbortController aims to support these requirements by providing abort() methods that can switch the state of the corresponding AbortSignal object. Apis that want to support abort can accept the AbortSignal object and use its state to determine how to proceed.

The following is the basic usage of AbortController

// Create an instance of AbortController
const controller = new AbortController()
const signal = controller.signal

// Listen for abort events and print the callback after controller.abort()
signal.addEventListener('abort', () = > {console.log(signal.aborted) // true
})

// Trigger interrupt
controller.abort()
Copy the code

How do I interrupt a fetch request with AbortController?

Fetch accepts AbortSignal as part of the second argument.

const controller = new AbortController()
const signal = controller.signal

// API returns after 5s
/ / https://slowmo.glitch.me/5000 5000 representative return corresponding value after 5 s

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.log('Error', err)
        }
    })

// Abort the request after 2s, triggering 'AbortError'
setTimeout((a)= > controller.abort(), 2000)
Copy the code

Triggering Controller.abort () interrupts the request and response fetch. The same AbortSignal (signal in the example above) can be used to abort multiple fetch requests. AbortController applies not only to FETCH, but can be used to abort any asynchronous event, such as implementing an interruptible promise.

Browser Support

With the exception of IE, support is ok

Caniuse.com/#feat=abort… Developer.mozilla.org/zh-CN/docs/…

polyfill

www.npmjs.com/package/abo… www.npmjs.com/package/abo…

Reference:

Developers.google.com/web/updates… Github.com/whatwg/fetc…