convert to markdown for web/api/abortcontroller zh-CN

files/zh-cn/web/api/abortcontroller/abort/index.md

@@ -0,0 +1,71 @@
+---
+title: AbortController.abort()
+slug: Web/API/AbortController/abort
+translation_of: Web/API/AbortController/abort
+original_slug: Web/API/FetchController/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](/en-US/docs/Web/API/fetch), consumption of any response {{domxref("Body")}}, and streams.
+
+## Syntax
+
+```js
+controller.abort();
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+Void.
+
+## Examples
+
+In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/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](/en-US/docs/Web/API/fetch) 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.
+
+```js
+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;
+  })
+}
+```
+
+> **备注：** When `abort()` is called, the `fetch()` promise rejects with an `AbortError`.
+
+You can find a full working example on GitHub — see [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) ([see it running live also](https://mdn.github.io/dom-examples/abort-api/)).
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat("api.AbortController.abort")}}
+
+## See also
+
+- [Fetch API](/en-US/docs/Web/API/Fetch_API)

files/zh-cn/web/api/abortcontroller/abortcontroller/index.md

@@ -0,0 +1,71 @@
+---
+title: AbortController.AbortController()
+slug: Web/API/AbortController/AbortController
+tags:
+  - AbortController
+  - Constructor
+  - Fetch
+translation_of: Web/API/AbortController/AbortController
+original_slug: Web/API/FetchController/AbortController
+---
+{{APIRef("DOM")}}{{SeeCompatTable}}
+
+**`AbortController()`** 构造函数创建了一个新的 `AbortController` 实例。
+
+## 语法
+
+```js
+var controller = new AbortController();
+```
+
+### Parameters
+
+无。
+
+## 示例
+
+在下面的这段代码中，我们将通过 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 来下载一段视频。
+
+首先通过 {{domxref("AbortController.AbortController","AbortController()")}} 构造函数来创建一个 controller 实例，然后通过 {{domxref("AbortController.signal")}} 属性获取到它的关联对象{{domxref("AbortSignal")}} 的引用。
+
+当 [fetch request](/zh-CN/docs/Web/API/fetch) 初始化后，将 `AbortSignal` 作为一个选项传入请求的选项参数中（如下 `{signal}`）。这将 signal,controller 与 fetch 请求关联起来，允许我们通过调用 {{domxref("AbortController.abort()")}} 来取消 fetch 请求，正如下第二个事件监听器所示。
+
+```js
+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 上找到一个完整的使用示例——参见 [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api)（[也可以看在线演示](https://mdn.github.io/dom-examples/abort-api/)）。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [Fetch API](/zh-CN/docs/Web/API/Fetch_API)