这篇翻译不完整。请帮忙从英语翻译这篇文章

草案
本页尚未完工.

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

FetchObserver接口提取API表示观察者对象,它允许您检索关于为获取请求的状态信息。

Properties

FetchObserver接口从其父接口继承属性EventTarget

FetchObserver.state 只读
Returns a FetchState enum value indicating the current state of the fetch request.

Event handlers

FetchObserver.onstatechange
Invoked when a statechange event fires, i.e. when the state of the fetch request changes.
FetchObserver.onrequestprogress
Invoked when a requestprogress event fires, i.e. when the request progresses.
FetchObserver.onresponseprogress
Invoked when a responseprogress event fires, i.e. when the download of the response progresses.

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 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.responseprogress 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 and display a message to let the user know.

Note that these event handlers are 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

未实现

未实现 未实现[1] 未实现

未实现

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

[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

文档标签和贡献者

 此页面的贡献者: wuCrio
 最后编辑者: wuCrio,