Skip to content

Commit

Permalink
convert to markdown for abortcontroller
Browse files Browse the repository at this point in the history 
Co-authored-by: Jack <[email protected]>
  • Loading branch information
@yin1999 @fwqaaq
yin1999 and fwqaaq committed Jul 20, 2022
1 parent 2d829e6 commit e7d49dc
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 87 deletions.
52 changes: 25 additions & 27 deletions files/zh-cn/web/api/abortcontroller/abort/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,34 @@ slug: Web/API/AbortController/abort
translation_of: Web/API/AbortController/abort
original_slug: Web/API/FetchController/abort
---
<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p>The <strong><code>abort()</code></strong> method of the {{domxref("AbortController")}} interface aborts a DOM request (e.g. a Fetch request) before it has completed. This is able to abort <a href="/en-US/docs/Web/API/fetch">fetch requests</a>, consumption of any response {{domxref("Body")}}, and streams.</p>
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.

<h2 id="Syntax">Syntax</h2>
## Syntax

<pre class="brush: js">controller.abort();</pre>
```js
controller.abort();
```

<h3 id="Parameters">Parameters</h3>
### Parameters

<p>None.</p>
None.

<h3 id="Return_value">Return value</h3>
### Return value

<p>Void.</p>
Void.

<h2 id="Examples">Examples</h2>
## Examples

<p>In the following snippet, we aim to download a video using the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
In the following snippet, we aim to download a video using the [Fetch API](/en-US/docs/Web/API/Fetch_API).

<p>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.</p>
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.

<p>When the <a href="/en-US/docs/Web/API/fetch">fetch request</a> is initiated, we pass in the <code>AbortSignal</code> as an option inside the request's options object (see <code>{signal}</code>, 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.</p>
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.

<pre class="brush: js">var controller = new AbortController();
```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
Expand All @@ -48,26 +51,21 @@ function fetchVideo() {
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}</pre>
}
```

<div class="note">
<p><strong>备注：</strong> When <code>abort()</code> is called, the <code>fetch()</code> promise rejects with an <code>AbortError</code>.</p>
</div>
> **备注：** When `abort()` is called, the `fetch()` promise rejects with an `AbortError`.
<p>You can find a full working example on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">see it running live also</a>).</p>
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/)).

<h2 id="Specifications">Specifications</h2>
## Specifications

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

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

## See also

<p>{{Compat("api.AbortController.abort")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>
- [Fetch API](/en-US/docs/Web/API/Fetch_API)
48 changes: 23 additions & 25 deletions files/zh-cn/web/api/abortcontroller/abortcontroller/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,27 +8,30 @@ tags:
translation_of: Web/API/AbortController/AbortController
original_slug: Web/API/FetchController/AbortController
---
<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p><strong><code>AbortController()</code></strong> 构造函数创建了一个新的 <code>AbortController</code> 实例</p>
**`AbortController()`** 构造函数创建了一个新的 `AbortController` 实例。

<h2 id="Syntax">Syntax</h2>
## 语法

<pre class="brush: js">var controller = new AbortController();</pre>
```js
var controller = new AbortController();
```

<h3 id="Parameters">Parameters</h3>
### Parameters

<p>无。</p>
无。

<h2 id="Examples">Examples</h2>
## 示例

<p>在下面的这段代码中，我们将通过<a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>来下载一段视频。</p>
在下面的这段代码中，我们将通过 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 来下载一段视频。

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

<p>当 <a href="/en-US/docs/Web/API/fetch">fetch request</a> 初始化后，将 <code>AbortSignal</code> 作为一个选项传入请求的选项参数中 (如下 <code>{signal}</code>). 这将 signal,controller 与 fetch 请求关联起来，允许我们通过调用{{domxref("AbortController.abort()")}}来取消 fetch 请求，正如下第二个事件监听器所示。</p>
当 [fetch request](/zh-CN/docs/Web/API/fetch) 初始化后，将 `AbortSignal` 作为一个选项传入请求的选项参数中（如下 `{signal}`）。这将 signal,controller 与 fetch 请求关联起来，允许我们通过调用 {{domxref("AbortController.abort()")}} 来取消 fetch 请求，正如下第二个事件监听器所示。

<pre class="brush: js">var controller = new AbortController();
```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
Expand All @@ -48,26 +51,21 @@ function fetchVideo() {
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}</pre>
}
```

<div class="note">
<p><strong>备注：</strong> 当<code>abort()</code> 被调用， <code>fetch()</code> promise 将会抛出一个<code>AbortError 对象</code>.</p>
</div>
> **备注：** 当 `abort()` 被调用，`fetch()` promise 将会抛出一个 `AbortError 对象`。
<p>你可以在 GitHub 上找到一个完整的使用示例 — see <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">see it running live also</a>).</p>
你可以在 GitHub 上找到一个完整的使用示例——参见 [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api)（[也可以看在线演示](https://mdn.github.io/dom-examples/abort-api/)）。

<h2 id="Specifications">Specifications</h2>
## 规范

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>
## 浏览器兼容性

{{Compat}}

## 参见

<p>{{Compat("api.AbortController.AbortController")}}</p>

<h2 id="See_also">See also</h2>

<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
</ul>
- [Fetch API](/zh-CN/docs/Web/API/Fetch_API)
62 changes: 27 additions & 35 deletions files/zh-cn/web/api/abortcontroller/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,37 @@ tags:
translation_of: Web/API/AbortController
original_slug: Web/API/FetchController
---
<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p><strong><code>AbortController</code></strong> 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。</p>
**`AbortController`** 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

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

<h2 id="构造函数">构造函数</h2>
## 构造函数

<dl>
<dt>{{domxref("AbortController.AbortController()")}}</dt>
<dd>创建一个新的 <code>AbortController</code> 对象实例。</dd>
</dl>
- {{domxref("AbortController.AbortController()")}}
- : 创建一个新的 `AbortController` 对象实例。

<h2 id="属性">属性</h2>
## 属性

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

<h2 id="方法">方法</h2>
## 方法

<dl>
<dt>{{domxref("AbortController.abort()")}}</dt>
<dd>中止一个尚未完成的 Web(网络) 请求。这能够中止 <a href="/en-US/docs/Web/API/fetch">fetch</a> 请求及任何响应体的消费和流。</dd>
</dl>
- {{domxref("AbortController.abort()")}}
- : 中止一个尚未完成的 Web（网络）请求。这能够中止 [fetch](/zh-CN/docs/Web/API/fetch) 请求及任何响应体的消费和流。

<h2 id="示例">示例</h2>
## 示例

<p>在下面的代码片段中，我们想通过 <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 下载一段视频。</p>
在下面的代码片段中，我们想通过 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 下载一段视频。

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

<p>当一个 <a href="/en-US/docs/Web/API/fetch">fetch request</a> 初始化，我们把 <code>AbortSignal</code> 作为一个选项传递到到请求对象（如下 <code>{ signal }</code>）。这将 <code>signal</code> 和 <code>controller</code> 与这个 <code>fetch request</code> 相关联，然后允许我们通过调用 {{domxref("AbortController.abort()")}} 中止请求，如下第二个事件监听函数。</p>
当一个 [fetch request](/zh-CN/docs/Web/API/fetch) 初始化，我们把 `AbortSignal` 作为一个选项传递到到请求对象（如下 `{ signal }`）。这将 `signal` 和 `controller` 与这个 `fetch request` 相关联，然后允许我们通过调用 {{domxref("AbortController.abort()")}} 中止请求，如下第二个事件监听函数。

<pre class="brush: js notranslate">const controller = new AbortController();
```js
const controller = new AbortController();
let signal = controller.signal;

const downloadBtn = document.querySelector('.download');
Expand All @@ -64,25 +59,22 @@ function fetchVideo() {
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}</pre>
}
```

<div class="note">
<p><strong>备注：</strong> 当 <code>abort()</code> 被调用时，这个 <code>fetch()</code> promise 将 <code>reject</code> 一个名为 <code>AbortError</code> 的 <code>DOMException</code>。</p>
</div>
> **备注：** 当 `abort()` 被调用时，这个 `fetch()` promise 将 `reject` 一个名为 `AbortError` 的 `DOMException`。
<p>您可以在 <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">GitHub</a> 上找到这个示例的完整源代码 (也可以<a href="https://mdn.github.io/dom-examples/abort-api/">在线运行</a>)。</p>
您可以在 [GitHub](https://github.com/mdn/dom-examples/tree/master/abort-api) 上找到这个示例的完整源代码（也可以[在线运行](https://mdn.github.io/dom-examples/abort-api/)）。

<h2 id="规范">规范</h2>
## 规范

{{Specifications}}

<h2 id="浏览器兼容">浏览器兼容</h2>
## 浏览器兼容

{{Compat}}

<h2 id="参见">参见</h2>
## 参见

<ul>
<li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
<li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
</ul>
- [Fetch API](/zh-CN/docs/Web/API/Fetch_API)
- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) by Jake Archibald

0 comments on commit e7d49dc

Please sign in to comment.