AbortSignal.timeout()
AbortSignal.timeout() は静的メソッドで、指定した時間が経過すると自動的に中止する AbortSignal を返すものです。
このシグナルは、タイムアウト時には TimeoutError DOMException で、ブラウザーの停止ボタン(または他の組み込まれた「停止」処理)を押した場合には AbortError DOMException で中止されます。 これにより、通常ユーザーへの通知が必要なタイムアウトエラーと、そうでないユーザーによる中止の発生を UI で区別できます。
タイムアウトは経過時間ではなく活動時間に基づきます。コードが実行されているワーカーがサスペンドされている場合や、文書がバックフォワードキャッシュ ("bfcache") にある場合は、事実上一時停止されます。
複数のシグナルを組み合わせるには、AbortSignal.any() を使用することができます。例えば、タイムアウトシグナルまたは AbortController.abort() を呼び出してダウンロードを直接中止させることができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 124 | 124 | 100 | 16 | 124 | 16 | |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
実装メモ
- タイムアウト時には常に `AbortError` で中止され、`TimeoutError` では中止されません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
実装メモ
- タイムアウト時には常に `AbortError` で中止され、`TimeoutError` では中止されません。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (124)
実装メモ
- タイムアウト時には常に `AbortError` で中止され、`TimeoutError` では中止されません。
基本構文
JAVASCRIPT
const url = "https://path_to_large_file.mp4";
try {
const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
const result = await res.blob();
// …
} catch (err) {
if (err.name === "TimeoutError") {
// This exception is from the abort signal
console.error("Timeout: It took more than 5 seconds to get the result!");
} else if (err.name === "AbortError") {
// This exception is from the fetch itself
console.error(
"Fetch aborted by user action (browser stop button, closing tab, etc.",
);
} else if (err.name === "TypeError") {
console.error("AbortSignal.timeout() method is not supported");
} else {
// A network error, or some other problem.
console.error(`Error: type: ${err.name}, message: ${err.message}`);
}
} 実務での使いどころ
-
AbortSignal.timeout() の活用
AbortSignal.timeout() は静的メソッドで、指定した時間が経過すると自動的に中止する AbortSignal を返すものです。
注意点
- 古いブラウザでは対応していない場合がある。
実装メモ
- 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。