FetchSignal

The FetchSignal interface of the Fetch API represents a signal object that allows you to communicate with a fetch request and control it via a FetchController.

Properties

The FetchSignal interface also inherits properties from its parent interface, EventTarget.

FetchSignal.aborted Read only

A Boolean that indicates whether the fetch request(s) the signal is communicating with is/are aborted (true) or not (false).

Event handlers

FetchSignal.onabort

Invoked when an abort event fires, i.e. when the fetch request(s) the signal is communicating with is/are aborted.

Methods

The FetchSignal interface inherits methods from its parent interface, EventTarget.

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().

We also specify an FetchSignal.onabort event handler on the signal object, so that if the fetch is aborted, we log a message to the console.

var controller = new FetchController();
var signal = controller.signal;
signal.onabort = function() {
  console.log("fetch request aborted");
};
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 FetchSignal 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