diff options
Diffstat (limited to 'files/ja/web/api/abortcontroller/index.md')
-rw-r--r-- | files/ja/web/api/abortcontroller/index.md | 81 |
1 files changed, 81 insertions, 0 deletions
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) |