From b9afb23d12dcae1e09f8d04c72143c5ddaa34aea Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 16 Jul 2021 16:27:00 -0400 Subject: delete conflicting/orphaned docs (zh-CN) (#1412) * delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin --- .../orphaned/web/api/fetchobserver/index.html | 146 --------------------- 1 file changed, 146 deletions(-) delete mode 100644 files/zh-cn/orphaned/web/api/fetchobserver/index.html (limited to 'files/zh-cn/orphaned/web/api/fetchobserver') diff --git a/files/zh-cn/orphaned/web/api/fetchobserver/index.html b/files/zh-cn/orphaned/web/api/fetchobserver/index.html deleted file mode 100644 index aa930a2e4a..0000000000 --- a/files/zh-cn/orphaned/web/api/fetchobserver/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: FetchObserver -slug: orphaned/Web/API/FetchObserver -translation_of: Web/API/FetchObserver -original_slug: Web/API/FetchObserver ---- -
{{draft}}{{APIRef("Fetch API")}}{{SeeCompatTable}}
- -

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

- -

Properties

- -

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

- -
-
{{domxref("FetchObserver.state")}} {{readonlyInline}}
-
Returns a FetchState enum value indicating the current state of the fetch request.
-
- -

Event handlers

- -
-
{{domxref("FetchObserver.onstatechange")}}
-
Invoked when a {{event("statechange_(cancellable_fetch)", "statechange")}} event fires, i.e. when the state of the fetch request changes.
-
{{domxref("FetchObserver.onrequestprogress")}}
-
Invoked when a {{event("requestprogress")}} event fires, i.e. when the request progresses.
-
{{domxref("FetchObserver.onresponseprogress")}}
-
Invoked when a {{event("responseprogress")}} event fires, i.e. when the download of the response progresses.
-
- -

Methods

- -

The FetchSignal interface inherits methods from its parent interface, {{domxref("EventTarget")}}.

- -

Examples

- -

In the following snippet, we create a new {{domxref("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 {{domxref("FetchController.abort()")}}.

- -

We also specify an observe property inside the fetch request init 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.

- -

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.

- -

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

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support -

{{CompatNo}}

- 		{{CompatNo}}{{CompatNo}}[1]{{CompatNo}} -

{{CompatNo}}

- 		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[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

- - -- cgit v1.2.3-54-g00ecf