From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/abortsignal/aborted/index.html | 57 +++++++++++ files/zh-cn/web/api/abortsignal/index.html | 107 +++++++++++++++++++++ files/zh-cn/web/api/abortsignal/onabort/index.html | 61 ++++++++++++ 3 files changed, 225 insertions(+) create mode 100644 files/zh-cn/web/api/abortsignal/aborted/index.html create mode 100644 files/zh-cn/web/api/abortsignal/index.html create mode 100644 files/zh-cn/web/api/abortsignal/onabort/index.html (limited to 'files/zh-cn/web/api/abortsignal') diff --git a/files/zh-cn/web/api/abortsignal/aborted/index.html b/files/zh-cn/web/api/abortsignal/aborted/index.html new file mode 100644 index 0000000000..eca97c13cf --- /dev/null +++ b/files/zh-cn/web/api/abortsignal/aborted/index.html @@ -0,0 +1,57 @@ +--- +title: AbortSignal.aborted +slug: Web/API/AbortSignal/aborted +translation_of: Web/API/AbortSignal/aborted +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

aborted是一个只读属性，它返回一个{{domxref("Boolean")}}表示与DOM通讯的信号是(true)否(false)已被放弃。

+ +

语法

+ +
var isAborted = abortSignal.aborted;
+ +

取值

+ +

一个{{domxref("Boolean")}}

+ +

示例

+ +

在下面的代码段中，我们创建了一个新的AbortController对象，并获取它的{{domxref("AbortSignal")}} (位于signal属性中)。然后我们用aborted属性检查这个信号是否已被放弃，并把相应的日志发送给终端。

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Request has been aborted') : console.log('Request not aborted');
+
+ +

规格

+ + + + + + + + + + + + + + +
规格状态备注
{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}}{{Spec2('DOM WHATWG')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.AbortSignal.aborted")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/abortsignal/index.html b/files/zh-cn/web/api/abortsignal/index.html new file mode 100644 index 0000000000..445511e99c --- /dev/null +++ b/files/zh-cn/web/api/abortsignal/index.html @@ -0,0 +1,107 @@ +--- +title: AbortSignal +slug: Web/API/AbortSignal +tags: + - API + - AbortSignal + - DOM + - Experimental + - Interface + - Reference +translation_of: Web/API/AbortSignal +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

AbortSignal 接口表示一个信号对象（ signal object ），它允许您通过 {{domxref("AbortController")}} 对象与DOM请求（如Fetch）进行通信并在需要时将其中止。

+ +

属性

+ +

AbortSignal接口还继承了其父接口{{domxref("EventTarget")}}的属性。

+ +
+
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
+
以 {{domxref("Boolean")}} 表示与之通信的请求是否被终止（true）或未终止（false）。
+
+ +

事件处理

+ +
+
{{domxref("AbortSignal.onabort")}}
+
当 {{event("abort_(dom_abort_api)", "abort")}} 事件触发时，即当信号正在与之通信的DOM请求被中止时调用。
+
+ +

方法

+ +

AbortSignal接口从其父接口 {{domxref("EventTarget")}} 继承方法。

+ +

示例

+ +

在以下片段中，我们旨在使用Fetch API下载视频。

+ +

我们首先使用{{domxref("AbortController.AbortController", "AbortController()")}}构造函数创建一个控制器，然后使用{{domxref ("AbortController.signal")}}属性。

+ +

当获取请求被启动时，我们在请求的选项对象中传递AbortSignal作为一个选项（见下面的{signal}）。 这将信号和控制器与获取请求相关联，并允许我们通过调用{{domxref("AbortController.abort()")}}来中止它，如下面的第二个事件监听器所示。

+ +
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() 会调用 reject，返回一个AbortError。

+
+ +
+

当前版本Firefox当Promise 含有 DOMException 时，会调用reject。

+
+ +

 

+ +

你可以在GitHub上找到一个完整的可用示例——请参阅abort-api（实例在这）。

+ +

规范

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

浏览器兼容性

+ + + +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/api/abortsignal/onabort/index.html b/files/zh-cn/web/api/abortsignal/onabort/index.html new file mode 100644 index 0000000000..e72dd94c4a --- /dev/null +++ b/files/zh-cn/web/api/abortsignal/onabort/index.html @@ -0,0 +1,61 @@ +--- +title: AbortSignal.onabort +slug: Web/API/AbortSignal/onabort +tags: + - API + - Fetch + - onabort + - 事件处理 + - 属性 + - 测试 + - 终止属性 +translation_of: Web/API/AbortSignal/onabort +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +
当事件被{{event("abort_(cancellable_fetch)", "终止")}}，{{domxref("FetchSignal")}}接口的onabort 只读属性就会被调用。例子.当fetch的请求信号被终止。
+ +

语法

+ +
abortSignal.onabort = function() { ... };
+ +

示例

+ +

在下面例子中, 我们将创建一个新的 AbortController 对象，并获取它的{{domxref("AbortSignal")}} (在 signal 属性中可用)。然后我们查看 onabort 属性是否被终止，并将相应的日志输出到控制台。

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+signal.onabort = function() {
+  console.log('Request aborted');
+};
+
+ +

规格

+ + + + + + + + + + + + + + +
规格状态标注
{{SpecName('DOM WHATWG', '#dom-abortsignal-aborted', 'onabort')}}{{Spec2('DOM WHATWG')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("api.AbortSignal.onabort")}}

+ +

参考文档

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