DiefetchLater()-Methode derWindow Schnittstelle erstellt einen verzögerten Abruf.

EinefetchLater()-Anfrage wird entweder gesendet, sobald die Seite verlassen wird (sie wird zerstört oder tritt in denbfcache ein), oder nach einem angegebenenactivateAfter-Timeout — je nachdem, was zuerst eintritt.

DiefetchLater()-Methode gibt einFetchLaterResult Objekt zurück, das einen einzigenactivated-Wert enthält, der angibt, ob die Anfrage bereits gesendet wurde. Beachten Sie, dass die Methode nicht das Ergebnis des tatsächlichen Abrufs zurückgibt, wenn dieser erfolgt (da er oft gesendet wird, nachdem das Dokument zerstört wurde), und die gesamte Antwort des Abrufs, einschließlich des Inhalts und der Header, ignoriert wird.

Anfragen, deren Inhalt einReadableStream ist, können nicht verzögert werden.

DiefetchLater()-Methode wird durch dieconnect-src-Content Security Policy Direktive gesteuert und nicht durch die Direktive der abgerufenen Ressourcen.

Syntax

fetchLater(resource)fetchLater(resource, options)

Parameter

DiefetchLater()-Methode akzeptiert dieselben Parameter wiefetch(), jedoch mit einer zusätzlichenactivateAfter-Option.

resource

Dies definiert die Ressource, die Sie abrufen möchten. Identisch zufetch(), kann dies entweder sein:

• Ein String oder ein anderes Objekt mit einemstringifier — einschließlich einesURL Objekts —, das die URL der Ressource bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die in einem Fensterkontext dasbaseURI des Dokuments ist.
• EinRequest Objekt.

optionsOptional

EinDeferredRequestInit Objekt, das alle benutzerdefinierten Einstellungen enthält, die Sie auf die Anfrage anwenden möchten, einschließlich einesactivateAfter Timeout-Werts, der definiert, wie lange das Ergebnis verzögert werden soll, bevor es gesendet wird.

Ausnahmen

Diegleichen Ausnahmen wie fürfetch() können fürfetchLater() ausgelöst werden, zusammen mit den folgenden zusätzlichen Ausnahmen:

QuotaExceededError

Die Nutzung dieser Funktion wurde blockiert, da das verfügbare Kontingent überschritten wurde. Sehen Sie sich diefetchLater()-Kontingente für weitere Details an. Aufrufer vonfetchLater() sollten defensiv sein undQuotaExceededError-Fehler in fast allen Fällen abfangen, insbesondere wenn sie Drittanbieter-JavaScript einbetten.

RangeErrorDOMException

Wird ausgelöst, wenn ein negativeractivateAfter-Wert angegeben wird.

TypeErrorDOMException

Zusätzlich zu den Gründen fürfetch() wird diese Ausnahme auch für eineReadableStream Anfrage ausgelöst (die nicht verzögert werden kann) oder für die Verwendung von unsicheren URLs (wiehttp://).

Rückgabewert

EinFetchLaterResult Objekt, das eineactivated-boolesche Eigenschaft enthält, die angibt, ob die Anfrage bereits gesendet wurde.

Beispiele

Der ArtikelfetchLater()-Kontingente bietet Beispiele dafür, wie die Kontingente angewendet werden.

Verzögern einerGET-Anfrage, bis die Seite verlassen oder geschlossen wird

fetchLater("/send_beacon");

Verzögern einerPOST-Anfrage für etwa eine Minute

In diesem Beispiel erstellen wir eineRequest-Anforderung und geben einenactivateAfter-Wert an, um das Senden der Anfrage für 60.000 Millisekunden (oder eine Minute) zu verzögern:

fetchLater("/send_beacon", {  method: "POST",  body: getBeaconData(),  activateAfter: 60000, // 1 minute});

Verzögern einerPOST-Anfrage für etwa eine Minute mit try/catch

Das gleiche Beispiel wie oben, aber die beste Praxis besteht darin, es in einem try/catch einzuschließen:

try {  fetchLater("/send_beacon", {    method: "POST",    body: getBeaconData(),    activateAfter: 60000, // 1 minute  });} catch (e) {  if (e instanceof QuotaExceededError) {    // Handle the quota error  } else {    // Handle other errors  }}

Verzögern einerPOST-Anfrage für etwa eine Minute und Erstellen einer Funktion zur Überprüfung, ob sie gesendet wurde

const result = fetchLater("https://report.example.com", {  method: "POST",  body: JSON.stringify(myReport),  activateAfter: 60000 /* 1 minute */,});function checkIfFetched() {  return result.activated;}

Aktualisieren einer ausstehenden Anfrage

In diesem Beispiel verwenden wir einenAbortController, um die Anfrage abzubrechen und neu zu erstellen:

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) {    // Avoid creating duplicated beacon if the previous one is still pending.    return;  }  beaconAbort = new AbortController();  beaconResult = fetchLater({    url: data,    signal: beaconAbort.signal,  });}

Ungültige Beispiele

Jeder der folgenden Aufrufe vonfetchLater() würde eine Ausnahme auslösen:

// Only potentially trustworthy URLs are supportedfetchLater("http://untrusted.example.com");// The length of the deferred request has to be knownfetchLater("https://origin.example.com", { body: someDynamicStream });// Deferred fetching only works on active windowsconst detachedWindow = iframe.contentWindow;iframe.remove();detachedWindow.fetchLater("https://origin.example.com");

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Deferred Fetch
• FetchLaterResult
• Fetch API