From f989ca4054c05b16640a9a01e15706a1d20d3890 Mon Sep 17 00:00:00 2001 From: nissy-dev Date: Wed, 12 Jan 2022 11:00:58 +0900 Subject: convert html to markdown Co-authored-by: iricp --- files/ja/web/api/abortcontroller/index.html | 101 ---------------------------- files/ja/web/api/abortcontroller/index.md | 81 ++++++++++++++++++++++ 2 files changed, 81 insertions(+), 101 deletions(-) delete mode 100644 files/ja/web/api/abortcontroller/index.html create mode 100644 files/ja/web/api/abortcontroller/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/abortcontroller/index.html b/files/ja/web/api/abortcontroller/index.html deleted file mode 100644 index 287a45fa6d..0000000000 --- a/files/ja/web/api/abortcontroller/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: AbortController -slug: Web/API/AbortController -tags: - - API - - AbortController - - 実験的 - - インターフェース - - リファレンス -translation_of: Web/API/AbortController ---- -

{{APIRef("DOM")}}{{SeeCompatTable}}

- -

AbortController インターフェースは一つ以上のリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。

- -

{{domxref("AbortController.AbortController()")}}コンストラクタを使うことで AbortController オブジェクトを新しく作ることができます。DOMリクエストとの送信は、AbortSignalオブジェクトを使って行われます。

- -

コンストラクタ

- -
-
{{domxref("AbortController()")}}
-
新しいAbortControllerオブジェクトインスタンスを生成します。
-
- -

プロパティ

- -
-
{{domxref("AbortController.signal")}} {{readonlyInline}}
-
{{domxref("AbortSignal")}}AbortSignalオブジェクトのインスタンスを返します。 このオブジェクトは、DOMリクエストの送信や中断に使用します。
-
- -

メソッド

- -
-
{{domxref("AbortController.abort()")}}
-

DOMリクエストが完了する前に中断します。 これは、fetchリクエスト、あらゆるレスポンスボディの消費、およびストリームを中断できます。

-
- -

例

- -

この後の短いコードで、Fetch API を使用してビデオをダウンロードします。

- -

まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。

- -

読み込みリクエスト が初期化すると、リクエストのオプションオブジェクト (下記 {signal} を参照) の内部のオプションとして AbortSignal を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。

- -
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 と呼ばれる DOMException で失敗します。

-
- -

GitHub で完全に動作する例を見ることができます — abort-api (または 実際に動作する様子 を参照) を参照してください。

- -

仕様

- - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName('DOM WHATWG', '#interface-AbortController', 'AbortController')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザの実装状況

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/abortcontroller/index.md b/files/ja/web/api/abortcontroller/index.md new file mode 100644 index 0000000000..d707dc8a72 --- /dev/null +++ b/files/ja/web/api/abortcontroller/index.md @@ -0,0 +1,81 @@ +--- +title: AbortController +slug: Web/API/AbortController +tags: + - API + - AbortController + - 実験的 + - インターフェース + - リファレンス +translation_of: Web/API/AbortController +browser-compat: api.AbortController +--- +{{APIRef("DOM")}} + +**`AbortController`** インターフェースは一つ以上のリクエストをいつでも中断することを可能にするコントローラーオブジェクトを表します。 + +{{domxref("AbortController.AbortController()")}}コンストラクタを使うことで `AbortController` オブジェクトを新しく作ることができます。DOMリクエストとの送信は、AbortSignalオブジェクトを使って行われます。 + +## コンストラクタ + +- {{domxref("AbortController()")}} + - : 新しい `AbortController` オブジェクトインスタンスを生成します。 + +## プロパティ + +- {{domxref("AbortController.signal")}} {{readonlyInline}} + - : {{domxref("AbortSignal")}}AbortSignalオブジェクトのインスタンスを返します。 このオブジェクトは、DOMリクエストの送信や中断に使用します。 + +## メソッド + +- {{domxref("AbortController.abort()")}} + - : DOMリクエストが完了する前に中断します。 これは、[fetchリクエスト](/ja/docs/Web/API/fetch)、あらゆるレスポンスボディの消費、およびストリームを中断できます。 + +## 例 + +この後の短いコードで、[Fetch API](/ja/docs/Web/API/Fetch_API) を使用してビデオをダウンロードします。 + +まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。 + +[読み込みリクエスト](/ja/docs/Web/API/fetch) が初期化すると、リクエストのオプションオブジェクト (下記 `{signal}` を参照) の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。 + +```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; + }) +} +``` + +> **Note:** `abort()` が呼ばれると、`fetch()` promise は `AbortError` と呼ばれる `DOMException` で失敗します。 + +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](/ja/docs/Web/API/Fetch_API) +- Jake Archibald による [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) -- cgit v1.2.3-54-g00ecf