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