Polyfill/ponyfill for the AbortController DOM API + optional patching of fetch (stub that calls catch, doesn't actually abort request).
npm install abortcontroller-polyfill
Minimal stubs so that the AbortController DOM API for terminating ``fetch()` requests can be used`
in browsers that doesn't yet implement it. This "polyfill" doesn't actually close the connection
when the request is aborted, but it will call .catch()` with `err.name == 'AbortError'`
instead of .then()`.
`js`
const controller = new AbortController();
const signal = controller.signal;
fetch('/some/url', {signal})
.then(res => res.json())
.then(data => {
// do something with "data"
}).catch(err => {
if (err.name == 'AbortError') {
return;
}
});
// controller.abort(); // can be called at any time
You can read about the AbortController API in the DOM specification.
`shell`
$ npm install --save abortcontroller-polyfill
If you're using webpack or similar, you then import it early in your client entrypoint .js file using
`js`
import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
// or:
require('abortcontroller-polyfill/dist/polyfill-patch-fetch')
If you need to support browsers where fetch is not available at all (for example
Internet Explorer 11), you first need to install a fetch polyfill and then
import the `abortcontroller-polyfill` afterwards.
The unfetch npm package offers a minimal `fetch()`
implementation (though it does not offer for example a Request` class). If you need a polyfill that
implements the full Fetch specification, use the
whatwg-fetch npm package instead. Typically you will
also need to load a polyfill that implements ES6 promises, for example
promise-polyfill, and of course you need to avoid
ES6 arrow functions and template literals.
Example projects showing abortable fetch setup so that it works even in Internet Explorer 11, using
both unfetch and GitHub fetch, is available
here.
create-react-app enforces the no-undef eslint rule at compile time so if your
version of eslint does not list `AbortController` etc as a known global for`
the browser` environment, then you might run into an compile error like:
`
'AbortController' is not defined no-undef
This can be worked around by (temporarily, details here) adding a declaration like:
`js`
const AbortController = window.AbortController;
If you just want to polyfill AbortController/AbortSignal without patching fetch
you can use:
`js`
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
You can either import it as a ponyfill without modifying globals:
`js`
const { AbortController, abortableFetch } = require('abortcontroller-polyfill/dist/cjs-ponyfill');
const { fetch } = abortableFetch(require('node-fetch'));
// or
// import { AbortController, abortableFetch } from 'abortcontroller-polyfill/dist/cjs-ponyfill';
// import _fetch from 'node-fetch';
// const { fetch } = abortableFetch(_fetch);
or if you're lazyjs`
global.fetch = require('node-fetch');
require('abortcontroller-polyfill/dist/polyfill-patch-fetch');
If you also need a `Request` class with support for aborting you can do:
`js
const { AbortController, abortableFetch } = require('abortcontroller-polyfill/dist/cjs-ponyfill');
const _nodeFetch = require('node-fetch');
const { fetch, Request } = abortableFetch({fetch: _nodeFetch, Request: _nodeFetch.Request});
const controller = new AbortController();
const signal = controller.signal;
controller.abort();
fetch(Request("http://api.github.com", {signal}))
.then(r => r.json())
.then(j => console.log(j))
.catch(err => {
if (err.name === 'AbortError') {
console.log('aborted');
}
})
`
See also Node.js examples here
The `abortcontroller-polyfill` works on Internet Explorer 11. However, to use it you must first`
install separate polyfills for promises and for fetch()`. For the promise polyfill, you can`
use the promise-polyfill` package from npm, and for `fetch()` you can use either the `whatwg-fetch` npm package (complete fetch implementation) or the `unfetch` npm package (not a complete polyfill but it's only 500 bytes large and covers a lot of the basic use cases).
If you choose `unfetch`, the imports should be done in this order for example:
`js`
import 'promise-polyfill/src/polyfill';
import 'unfetch/polyfill';
import 'abortcontroller-polyfill';
See example code here.
The `abortcontroller-polyfill` works on Internet Explorer 8. However, since `github-fetch`
only supports IE 10+ you need to use the fetch-ie8` npm package instead and also note that IE 8 only`
implements ES 3 so you need to use the es5-shim` package (or similar). Finally, just like with
IE 11 you also need to polyfill promises. One caveat is that CORS requests will not work out of the box on IE 8.
Here is a basic example of abortable fetch running in IE 8.
The `abortcontroller-polyfill` works on Legacy Webview. However, to use it you must first confirm that the native AbortController and AbortSignal already exist in the environment. Otherwise, it is recommended to use the other solutions mentioned above.
`js``
import 'abortcontroller-polyfill/dist/abortsignal-polyfill-only';
MIT