blob: b5903cc811ddfcbb2b1d4a5cac3435b433cd3eea (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: AbortSignal
slug: Web/API/AbortSignal
tags:
- API
- AbortSignal
- DOM
- インターフェース
- リファレンス
- 実験的
translation_of: Web/API/AbortSignal
---
<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
<p><strong><code>AbortSignal</code></strong> インターフェイスは DOM 要求 (Fetch など) と通信し、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中断することを可能にするシグナルオブジェクトを表します。</p>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>AbortSignal インターフェイスはまた、親のインターフェースである、 {{domxref("EventTarget")}} からプロパティを継承しています。</em></p>
<dl>
<dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
<dd>シグナルが通信しているリクエスト(複数回も)が中断しているかを示す {{domxref("Boolean")}} で、(<code>true</code>) が中断している 、(<code>false</code>) は中断していないを表します。</dd>
</dl>
<h2 id="Events" name="Events">イベント</h2>
<p><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> を使うかこのインターフェースの <code>on<em>eventname</em></code> プロパティにイベントリスナーを割り当てることでこのイベントへのアクセスに待機します。</p>
<dl>
<dt><code><a href="/ja/docs/Web/API/AbortSignal/abort_event">abort</a></code></dt>
<dd>シグナルが通信している DOM リクエスト (複数回も) の中断を呼び出す。<br>
また <code><a href="/ja/docs/Web/API/AbortSignal/onabort">onabort</a></code> プロパティを介して利用可能です。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<p><em>AbortSignal インターフェースは親インタフェースである、{{domxref("EventTarget")}} からメソッドを継承します。</em></p>
<h2 id="Examples" name="Examples">例</h2>
<p>この後の短いコードで、<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> を使用してビデオをダウンロードします。</p>
<p>まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。</p>
<p><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">読み込みリクエスト</a> が初期化すると、リクエストのオプションオブジェクト (下記 <code>{signal}</code> を参照) の内部のオプションとして <code>AbortSignal</code> を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。</p>
<pre class="brush: 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;
})
}</pre>
<div class="note">
<p><strong>注記</strong>: <code>abort()</code> が呼ばれると、<code>fetch()</code> promise は <code>AbortError</code> で失敗します。</p>
</div>
<div class="warning">
<p>現在のバージョンの Firefox は、<code>DOMException</code> で失敗します。</p>
</div>
<p>GitHub で完全に動作する例を見ることができます — <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/">実際に動作する様子</a> を参照) を参照してください。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">ステータス</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
<p>{{Compat("api.AbortSignal")}}</p>
<h2 id="関連情報">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
<li>Jake Archibald による <a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a></li>
</ul>
|
