Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
abortcontroller-polyfill
Advanced tools
Polyfill/ponyfill for the AbortController DOM API + optional patching of fetch (stub that calls catch, doesn't actually abort request).
The abortcontroller-polyfill package provides a polyfill for the AbortController interface, which allows you to abort one or more Web requests as and when desired. This is particularly useful for canceling fetch requests in environments where the AbortController API is not natively supported, such as older browsers.
Aborting a fetch request
This code demonstrates how to use abortcontroller-polyfill to abort a fetch request. An instance of AbortController is created, and its signal is passed to the fetch request. Calling `abort` on the controller instance will cancel the request.
const { AbortController } = require('abortcontroller-polyfill/dist/cjs-ponyfill');
let controller = new AbortController();
let signal = controller.signal;
fetch('https://example.com', { signal })
.then(response => console.log(response))
.catch(err => console.error(err));
// Abort the request
ccontroller.abort();
The whatwg-fetch package is a polyfill for the fetch API, which includes support for aborting requests using AbortController. However, it focuses more broadly on providing the fetch API rather than specifically on the abort functionality.
Axios is a promise-based HTTP client for the browser and node.js that supports request cancellation. While it provides similar functionality to abort requests, it does so through its own API rather than using the AbortController interface.
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()
.
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.
$ npm install --save abortcontroller-polyfill
If you're using webpack or similar, you then import it early in your client entrypoint .js file using
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:
const AbortController = window.AbortController;
If you just want to polyfill AbortController/AbortSignal without patching fetch you can use:
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
You can either import it as a ponyfill without modifying globals:
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 lazy
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:
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:
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.
MIT
FAQs
Polyfill/ponyfill for the AbortController DOM API + optional patching of fetch (stub that calls catch, doesn't actually abort request).
The npm package abortcontroller-polyfill receives a total of 1,351,379 weekly downloads. As such, abortcontroller-polyfill popularity was classified as popular.
We found that abortcontroller-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.