AbortSignal
Experimental
これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
AbortSignal
インターフェイスは DOM 要求 (Fetch など) と通信し、必要に応じて AbortController
(en-US) オブジェクトを介して中断することを可能にするシグナルオブジェクトを表します。
プロパティ
AbortSignal インターフェイスはまた、親のインターフェースである、 EventTarget
からプロパティを継承しています。
AbortSignal.aborted
(en-US) 読取専用- シグナルが通信しているリクエスト(複数回も)が中断しているかを示す
Boolean
で、(true
) が中断している 、(false
) は中断していないを表します。
イベント
addEventListener()
を使うかこのインターフェースの oneventname
プロパティにイベントリスナーを割り当てることでこのイベントへのアクセスに待機します。
abort (en-US)
- シグナルが通信している DOM リクエスト (複数回も) の中断を呼び出す。
またonabort (en-US)
プロパティを介して利用可能です。
メソッド
AbortSignal インターフェースは親インタフェースである、EventTarget
からメソッドを継承します。
例
この後の短いコードで、Fetch API を使用してビデオをダウンロードします。
まず AbortController()
(en-US) コンストラクターを使ってコントローラーを生成し、AbortController.signal
(en-US) プロパティを使用して関連する AbortSignal
オブジェクトへの参照を取得します。
読み込みリクエスト が初期化すると、リクエストのオプションオブジェクト (下記 {signal}
を参照) の内部のオプションとして AbortSignal
を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、AbortController.abort()
(en-US) を呼び出すことで下記の 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
で失敗します。
現在のバージョンの Firefox は、DOMException
で失敗します。
GitHub で完全に動作する例を見ることができます — abort-api (または 実際に動作する様子 を参照) を参照してください。
仕様
仕様書 | ステータス | コメント |
---|---|---|
DOM AbortSignal の定義 |
現行の標準 | 初回定義 |
ブラウザの実装状況
BCD tables only load in the browser
関連情報
- Fetch API
- Jake Archibald による Abortable Fetch