From cd06eddd6d8fdc8ee5eaf2f5536f32c4c4f18f09 Mon Sep 17 00:00:00 2001 From: nissy-dev Date: Mon, 13 Dec 2021 14:50:45 +0900 Subject: translate abortController to Japanese Co-authored-by: iricp --- files/ja/web/api/abortcontroller/index.html | 101 ++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/ja/web/api/abortcontroller/index.html (limited to 'files') diff --git a/files/ja/web/api/abortcontroller/index.html b/files/ja/web/api/abortcontroller/index.html new file mode 100644 index 0000000000..287a45fa6d --- /dev/null +++ b/files/ja/web/api/abortcontroller/index.html @@ -0,0 +1,101 @@ +--- +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")}}

+ +

関連情報

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