From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../zh-cn/web/api/fetchcontroller/abort/index.html | 85 ----------------- .../api/fetchcontroller/abortcontroller/index.html | 85 ----------------- files/zh-cn/web/api/fetchcontroller/index.html | 106 --------------------- 3 files changed, 276 deletions(-) delete mode 100644 files/zh-cn/web/api/fetchcontroller/abort/index.html delete mode 100644 files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html delete mode 100644 files/zh-cn/web/api/fetchcontroller/index.html (limited to 'files/zh-cn/web/api/fetchcontroller') diff --git a/files/zh-cn/web/api/fetchcontroller/abort/index.html b/files/zh-cn/web/api/fetchcontroller/abort/index.html deleted file mode 100644 index d661e73d2b..0000000000 --- a/files/zh-cn/web/api/fetchcontroller/abort/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: AbortController.abort() -slug: Web/API/FetchController/abort -translation_of: Web/API/AbortController/abort ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

The abort() method of the {{domxref("AbortController")}} interface aborts a DOM request (e.g. a Fetch request) before it has completed. This is able to abort fetch requests, consumption of any response {{domxref("Body")}}, and streams.

- -

Syntax

- -
controller.abort();
- -

Parameters

- -

None.

- -

Return value

- -

Void.

- -

Examples

- -

In the following snippet, we aim to download a video using the Fetch API.

- -

We first create a controller using the {{domxref("AbortController.AbortController","AbortController()")}} constructor, then grab a reference to its associated {{domxref("AbortSignal")}} object using the {{domxref("AbortController.signal")}} property.

- -

When the fetch request is initiated, we pass in the AbortSignal as an option inside the request's options object (see {signal}, below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener.

- -
var controller = new AbortController();
-var signal = controller.signal;
-
-var downloadBtn = document.querySelector('.download');
-var abortBtn = document.querySelector('.abort');
-
-downloadBtn.addEventListener('click', fetchVideo);
-
-abortBtn.addEventListener('click', function() {
-  controller.abort();
-  console.log('Download aborted');
-});
-
-function fetchVideo() {
-  ...
-  fetch(url, {signal}).then(function(response) {
-    ...
-  }).catch(function(e) {
-    reports.textContent = 'Download error: ' + e.message;
-  })
-}
- -
-

Note: When abort() is called, the fetch() promise rejects with an AbortError.

-
- -

You can find a full working example on GitHub — see abort-api (see it running live also).

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-abortcontroller-abort', 'abort()')}}{{Spec2('DOM WHATWG')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.AbortController.abort")}}

- -

See also

- - diff --git a/files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html b/files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html deleted file mode 100644 index 35fe67d1ae..0000000000 --- a/files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: AbortController.AbortController() -slug: Web/API/FetchController/AbortController -tags: - - AbortController - - Constructor - - Fetch -translation_of: Web/API/AbortController/AbortController ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

AbortController() 构造函数创建了一个新的AbortController实例

- -

Syntax

- -
var controller = new AbortController();
- -

Parameters

- -

无.

- -

Examples

- -

在下面的这段代码中, 我们将通过Fetch API来下载一段视频.

- -

首先通过{{domxref("AbortController.AbortController","AbortController()")}} 构造函数来创建一个controller实例, 然后通过{{domxref("AbortController.signal")}} 属性获取到它的关联对象{{domxref("AbortSignal")}} 的引用.

- -

当 fetch request 初始化后, 将 AbortSignal 作为一个选项传入请求的选项参数中 (如下 {signal}). 这将signal,controller与fetch请求关联起来, 允许我们通过调用{{domxref("AbortController.abort()")}}来取消fetch请求, 正如下第二个事件监听器所示.

- -
var controller = new AbortController();
-var signal = controller.signal;
-
-var downloadBtn = document.querySelector('.download');
-var abortBtn = document.querySelector('.abort');
-
-downloadBtn.addEventListener('click', fetchVideo);
-
-abortBtn.addEventListener('click', function() {
-  controller.abort();
-  console.log('Download aborted');
-});
-
-function fetchVideo() {
-  ...
-  fetch(url, {signal}).then(function(response) {
-    ...
-  }).catch(function(e) {
-    reports.textContent = 'Download error: ' + e.message;
-  })
-}
- -
-

提示: 当abort() 被调用,  fetch() promise 将会抛出一个AbortError对象.

-
- -

你可以在GitHub上找到一个完整的使用示例 — see abort-api (see it running live also).

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-abortcontroller-abortcontroller', 'AbortController()')}}{{Spec2('DOM WHATWG')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.AbortController.AbortController")}}

- -

See also

- - diff --git a/files/zh-cn/web/api/fetchcontroller/index.html b/files/zh-cn/web/api/fetchcontroller/index.html deleted file mode 100644 index 4211eb8211..0000000000 --- a/files/zh-cn/web/api/fetchcontroller/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: AbortController -slug: Web/API/FetchController -tags: - - API - - AbortController - - Fetch - - how to cancel a fetch request -translation_of: Web/API/AbortController ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

AbortController接口表示一个控制器对象，允许你根据需要中止一个或多个 Web请求。

- -

你可以使用 {{domxref("AbortController.AbortController()")}} 构造函数创建一个新的 AbortController 。使用{{domxref("AbortSignal")}} 对象可以完成与与DOM请求的通信。

- -

构造函数

- -
-
{{domxref("AbortController.AbortController()")}}
-
创建一个新的AbortController 对象实例。
-
- -

属性

- -
-
{{domxref("AbortController.signal")}} {{readonlyInline}}
-
返回一个{{domxref("AbortSignal")}}对象实例，它可以用来 with/abort 一个Web(网络)请求。
-
- -

方法

- -
-
{{domxref("AbortController.abort()")}}
-
中止一个尚未完成的Web(网络)请求。这能够中止fetch 请求，任何响应{{domxref("Body")}}的消费者和流。
-
- -

示例

- -

在下面的代码片段中，我们想通过 Fetch API 下载一段视频。

- -

我们先使用{{domxref("AbortController.AbortController","AbortController()")}}构造函数创建一个控制器，然后使用{{domxref("AbortController.signal")}}属性获取其关联 {{domxref("AbortSignal")}}对象的引用。

- -

当一个 fetch request 初始化，我们把 AbortSignal 作为一个选项传递到到请求对象（如下 {signal}）。这将信号和控制器与获取请求相关联然后允许我们通过调用{{domxref("AbortController.abort()")}}中止请求，如下第二个事件监听函数。

- -
const controller = new AbortController();
-let signal = controller.signal;
-
-const downloadBtn = document.querySelector('.download');
-const abortBtn = document.querySelector('.abort');
-
-downloadBtn.addEventListener('click', fetchVideo);
-
-abortBtn.addEventListener('click', function() {
-  controller.abort();
-  console.log('Download aborted');
-});
-
-function fetchVideo() {
-  //...
-  fetch(url, {signal}).then(function(response) {
-    //...
-  }).catch(function(e) {
-    reports.textContent = 'Download error: ' + e.message;
-  })
-}
- -
-

注意：当abort() 被调用时，fetch() promise 拒绝一个名为 AbortError 的DOMException 。

-
- -

可以在GitHub上找到完整的工作示例 — 请参见 abort-api（另请参见实时运行）。

- -

规范

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-abortcontroller', 'AbortController')}}{{Spec2('DOM WHATWG')}}Initial definition
- -

浏览器兼容

- - - -

{{Compat("api.AbortController")}}

- -

参见

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