statechange

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The statechange event of the Fetch API is fired when the state of a fetch request changes.

Bubbles No
Cancelable No
Target objects FetchObserver
Interface Event

Examples

downloadBtn.addEventListener('click', function() {
  fetch(url, {
    signal,
    observe(observer) {
      observer.onstatechange = function() {
        if (observer.state = 'complete') {
          reports.textContent = 'Download complete';
        }
      }
    }
  }).then( ... ) // do something with the response
});

Inheritance

The statechange event implements the Event interface — it has available the properties and methods defined on this interface.

Specifications

Not part of a specification yet.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

No support

 No support No support[1] No support

No support

 No support
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support No support No support[1] No support No support No support No support

[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

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,