FetchController

The FetchController interface of the Fetch API represents a controller object that allows you to control one or more fetch requests.

You can create a new FetchController object using the FetchController.FetchController() constructor. communicating with a fetch request is done using a FetchSignal.

Constructor

FetchController.FetchController()

Creates a new FetchController object instance.

Properties

FetchController.signal Read only

Returns a FetchSignal object instance, which can be used to communicate with/control a fetch request.

Methods

FetchController.abort()

Aborts a fetch request before it has completed.

Examples

In the following snippet, we create a new FetchController object, get its signal, and then give the signal to the fetch request via the signal parameter of its init object so the controller can control it. Later on we specify an event listener on a cancel button so that when the button is clicked, we abort the fetch request using FetchController.abort().

var controller = new FetchController();
var signal = controller.signal;
downloadBtn.addEventListener('click', function() {
  fetch(url, {signal}).then( ... ) // do something with the response
});
cancelBtn.addEventListener('click', function() {
  controller.abort();
});

You can find a work-in-progress demo showing usage of FetchController on GitHub (see the source code and the live example).

Specifications

Not part of a specification yet.

Browser compatibility

[1] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — dom.fetchObserver.enabled and dom.fetchController.enabled — and set the values of both to true.

See also

• ServiceWorker API
• HTTP access control (CORS)
• HTTP