1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: FetchObserver
slug: Web/API/FetchObserver
translation_of: Web/API/FetchObserver
---
<div>{{draft}}{{APIRef("Fetch API")}}{{SeeCompatTable}}</div>
<p><font><font>在</font></font><strong><code>FetchObserver</code></strong><font><font>接口</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><font><font>提取API</font></font></a><font><font>表示观察者对象，它允许您检索关于为获取请求的状态信息。</font></font></p>
<h2 id="Properties">Properties</h2>
<p><em><font><font>FetchObserver接口从其父接口继承属性</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" title="EventTarget是一个由可以接收事件的对象实现的接口，并且可以为它们提供监听器。"><code>EventTarget</code></a><font><font>。</font></font></em></p>
<dl>
<dt>{{domxref("FetchObserver.state")}} {{readonlyInline}}</dt>
<dd>Returns a <code>FetchState</code> enum value indicating the current state of the fetch request.</dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
<dt>{{domxref("FetchObserver.onstatechange")}}</dt>
<dd>Invoked when a {{event("statechange_(cancellable_fetch)", "statechange")}} event fires, i.e. when the state of the fetch request changes.</dd>
<dt>{{domxref("FetchObserver.onrequestprogress")}}</dt>
<dd>Invoked when a {{event("requestprogress")}} event fires, i.e. when the request progresses.</dd>
<dt>{{domxref("FetchObserver.onresponseprogress")}}</dt>
<dd>Invoked when a {{event("responseprogress")}} event fires, i.e. when the download of the response progresses.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>The FetchSignal interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
<h2 id="Examples">Examples</h2>
<p>In the following snippet, we create a new {{domxref("FetchController")}} object, get its <code>signal</code>, and then give the signal to the <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> via the signal parameter of its <code>init</code> 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 {{domxref("FetchController.abort()")}}.</p>
<p>We also specify an observe property inside the fetch request <code>init</code> object — this contains a {{domxref("ObserverCallback")}} object, the sole purpose of which is to provide a callback function that runs when the fetch request runs. This returns a {{domxref("FetchObserver")}} object that can be used to retrieve information concerning the status of a fetch request.</p>
<p>Here we use {{domxref("FetchController.responseprogress")}} and {{domxref("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.</p>
<p><strong>Note that these event handlers are not yet supported anywhere.</strong></p>
<pre class="brush: js">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();
});</pre>
<p>You can find a work-in-progress demo showing usage of <code>FetchObserver</code> on GitHub (see the <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-signal-controller-observer">source code</a> and the <a href="https://mdn.github.io/fetch-examples/fetch-signal-controller-observer/">live example</a>).</p>
<h2 id="Specifications">Specifications</h2>
<p>Not part of a specification yet.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>
<p>{{CompatNo}}</p>
</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>
<p>{{CompatNo}}</p>
</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Android Webview</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
|
