FetchObserver.state

The state read-only property of the FetchObserver interface returns a FetchState enum value indicating the current state of the fetch request.

Syntax

var state = observer.state;

Value

A FetchState enum value indicating the current state of the fetch request. The values it can take are:

• requesting: The request has not yet completed.
• responding: The request has completed, and the response is now underway.
• aborted: The request has been aborted.
• errored: The request has failed with an error.
• complete: The request has been successfully 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().

We also specify an observe property inside the fetch request init object — this contains a ObserverCallback object, the sole purpose of which is to provide a callback function that runs when the fetch request runs. This returns a FetchObserver object that can be used to retrieve information concerning the status of a fetch request.

Here we use FetchController.onresponseprogress and FetchController.onstatechange event handlers to respectively fill up a progress bar as more of the reponse downloads, and to determine when the download has completed (using the state property) and display a message to let the user know.

var controller = new FetchController();
var signal = controller.signal;
downloadBtn.addEventListener('click', function() {
  fetch(url, {
    signal,
    observe(observer) {
      observer.onresponseprogress = function(e) {
        console.log(e);
        progress.max = e.total;
        progress.value = e.loaded;
      }
      observer.onstatechange = function() {
        if (observer.state = 'complete') {
          reports.textContent = 'Download complete';
        }
      }
    }
  }).then( ... ) // do something with the response
});
cancelBtn.addEventListener('click', function() {
  controller.abort();
});

You can find a work-in-progress demo showing usage of FetchObserver 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