MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

FetchObserver.onresponseprogress

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 onresponseprogress property of the FetchObserver interface is an event handler invoked when a responseprogress event fires, i.e. when the download of the response progresses.

Syntax

observer.onresponseprogress = function() { ... };

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

Note that onresponseprogress is not yet supported anywhere.

var controller = new FetchController();
var signal = controller.signal;

downloadBtn.addEventListener('click', function() {
  fetch(url, {
    signal,
    observe(observer) {
      observer.onresponseprogress = function(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

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

No support

No support No support 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 No support No support No support No support

See also

Document Tags and Contributors

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