このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Window: fetchLater() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
fetchLater() はWindow インターフェイスのメソッドで、遅延取得を作成します。
fetchLater() リクエストは、ページが離脱された時点（ページが破棄されるかbfcache に入る時点）、または指定されたactivateAfter タイムアウト経過後のいずれか早い方で行われます。
fetchLater() メソッドは、リクエストが送信済みかどうかを示す単一のactivated 値を含むFetchLaterResult オブジェクトを返します。このメソッドは、実際の取得が行われた時点での結果（文書が破棄された後に送信されることが多い）を返さず、取得のレスポンス全体（本文やヘッダーを含む）は無視されることに注意してください。
ReadableStream を本文とするリクエストは遅延できません。
fetchLater() メソッドの制御は、取得されるリソースのディレクティブではなく、コンテンツセキュリティポリシーのconnect-src ディレクティブによって行われます
構文
fetchLater(resource)fetchLater(resource, options)引数
fetchLater()メソッドは、fetch() と全く同じ引数を受け取りますが、 1 つ追加でactivateAfter オプションがあります。
resource取得したいリソースを定義します。
fetch()と同じで、以下のどちらかが使用できます。options省略可リクエストに適用する独自の設定を含む
DeferredRequestInitオブジェクトです。結果を送信する前に遅延させる時間を定義するactivateAfterタイムアウト値を含みます。
例外
fetchLater() では、fetch() と同じ例外に加え、以下の追加の例外が発生する可能性があります。
QuotaExceededErrorこの機能の使用は、利用可能な割り当てを超えたためブロックされました。詳細については、
fetchLater()の割り当て を参照してください。fetchLater()を呼び出す側は、特にサードパーティの JavaScript を埋め込んでいる場合、ほぼすべてのケースで防御的プログラミングを行い、QuotaExceededErrorエラーを捕捉する必要があります。RangeErrorDOMExceptionactivateAfterに負の値が指定された場合に発生します。TypeErrorDOMExceptionfetch()での理由に加え、この例外はReadableStreamリクエスト（遅延処理不可）や信頼できない URL（例:http://）の使用時にも発生します。
返値
FetchLaterResult リクエストが送信済みであるかどうかを示すactivated 論理プロパティを含みます。
メモ:フェッチリクエストが送信されると、そのレスポンス（本文とヘッダーを含む）は利用可能にならず、無視されます。
例
fetchLater() の割り当て量 の記事では、割り当て量がどのように適用されるかの例が示されています。
ページから離脱または閉じられるまでGETリクエストを遅延させる
fetchLater("/send_beacon");POST リクエストを約 1 分間遅延させる
この例では、Request を作成し、activateAfter 値を指定してリクエスト送信を 60,000 ミリ秒（1 分）遅延させます。
fetchLater("/send_beacon", { method: "POST", body: getBeaconData(), activateAfter: 60000, // 1 分});メモ:実際の送信時刻は不明です。ブラウザーは、遅延フェッチのバッチ処理の最適化などを行うため、待機時間が長くなったり短くなったりする可能性があるためです。
POST リクエストを約 1 分間遅延させる（try/catch を使用）
上記の例と同じですが、ベストプラクティスとしてはこれを try/catch で囲むことです。
try { fetchLater("/send_beacon", { method: "POST", body: getBeaconData(), activateAfter: 60000, // 1 分 });} catch (e) { if (e instanceof QuotaExceededError) { // 割り当てエラーを処理 } else { // その他のエラーを処理 }}POST リクエストを約 1 分間遅延させ、送信されたかどうかを確認する関数を作成する
const result = fetchLater("https://report.example.com", { method: "POST", body: JSON.stringify(myReport), activateAfter: 60000 /* 1 分 */,});function checkIfFetched() { return result.activated;}待機中のリクエストを更新する
この例では、AbortController を使用してリクエストを取り消し、再作成します。
let beaconResult = null;let beaconAbort = null;function updateBeacon(data) { const pending = !beaconResult || !beaconResult.activated; if (pending && beaconAbort) { beaconAbort.abort(); } createBeacon(data);}function createBeacon(data) { if (beaconResult && !beaconResult.activated) { // 前回のビーコンがまだ待機中の場合は、重複したビーコンの作成を避けることができる return; } beaconAbort = new AbortController(); beaconResult = fetchLater({ url: data, signal: beaconAbort.signal, });}不正な例
次のfetchLater()呼び出しのいずれも例外が発生します。
// 信頼性のある可能性のある URL のみが使用できるfetchLater("http://untrusted.example.com");// 遅延リクエストの長さは把握されている必要があるfetchLater("https://origin.example.com", { body: someDynamicStream });// 遅延取得はアクティブなウィンドウでのみ動作するconst detachedWindow = iframe.contentWindow;iframe.remove();detachedWindow.fetchLater("https://origin.example.com");仕様書
| Specification |
|---|
| Fetch # deferred-fetch |