Window: fetchLater() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die fetchLater() Methode des Window Interfaces erstellt einen verzögerten Abruf.

Eine fetchLater() Anfrage wird gesendet, sobald die Seite verlassen wird (sie zerstört wird oder in den bfcache eintritt) oder nach einem angegebenen activateAfter Timeout – je nachdem, was zuerst eintritt.

Die fetchLater() Methode gibt ein FetchLaterResult Objekt zurück, das einen einzigen activated 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 geschieht (da er oft gesendet wird, nachdem das Dokument zerstört wurde) und die gesamte Antwort des Abrufs, einschließlich Körper und Header, ignoriert wird.

Anfragen, deren Körper ein ReadableStream ist, können nicht aufgeschoben werden.

Die fetchLater() Methode wird durch die connect-src Content Security Policy Direktive gesteuert, anstatt durch die Direktive der abgerufenen Ressourcen.

Syntax

fetchLater(resource)
fetchLater(resource, options)

Parameter

Die fetchLater() Methode nimmt dieselben Parameter wie fetch(), jedoch mit einer zusätzlichen activateAfter Option.

resource

Dies definiert die Ressource, die Sie abrufen möchten. Genau wie bei fetch() kann dies entweder sein:

Ein String oder ein anderes Objekt mit einem stringifier – einschließlich eines URL Objekts – das die URL der Ressource bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die im Fensterkontext die baseURI des Dokuments ist.
Ein Request Objekt.

options Optional

Ein DeferredRequestInit Objekt, das alle benutzerdefinierten Einstellungen enthält, die Sie auf die Anfrage anwenden möchten, einschließlich eines activateAfter Timeout-Werts, der definiert, wie lange das Ergebnis aufgeschoben werden soll, bevor es gesendet wird.

Ausnahmen

Die gleichen Ausnahmen wie bei fetch() können für fetchLater() auftreten, zusammen mit den folgenden zusätzlichen Ausnahmen:

QuotaExceededError DOMException: Die Nutzung dieses Features wurde blockiert, da das verfügbare Kontingent überschritten wurde. Siehe fetchLater() Quoten für weitere Details. Aufrufer von fetchLater() sollten defensiv sein und QuotaExceededError Fehler in fast allen Fällen abfangen, insbesondere wenn sie Drittanbieter-JavaScript einbetten.
RangeError DOMException: Wird ausgelöst, wenn ein negativer activateAfter Wert angegeben wird.
TypeError DOMException: Zusätzlich zu den Gründen für fetch() wird diese Ausnahme auch bei einer ReadableStream Anfrage (die nicht aufgeschoben werden kann) oder bei der Verwendung von unsicheren URLs (wie http://) ausgelöst.

Rückgabewert

Ein FetchLaterResult mit einer activated booleschen Eigenschaft, die angibt, ob die Anfrage bereits gesendet wurde.

Hinweis: Sobald die Abrufanfrage gesendet wird, ist ihre Antwort – einschließlich des Körpers und der Header – nicht verfügbar und wird ignoriert.

Beispiele

Der Artikel zu den fetchLater() Quoten bietet Beispiele dafür, wie die Quoten angewendet werden.

Einen `GET`-Anfrage aufschieben, bis die Seite verlassen oder geschlossen wird

fetchLater("/send_beacon");

Eine `POST`-Anfrage für etwa eine Minute aufschieben

In diesem Beispiel erstellen wir eine Request und geben einen activateAfter 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
});

Hinweis: Der tatsächliche Sendezeitpunkt ist unbekannt, da der Browser möglicherweise eine längere oder kürzere Zeit wartet, z.B. um die Gruppenbildung aufgeschobener Abrufe zu optimieren.

Eine `POST`-Anfrage für etwa eine Minute mit einem try/catch aufschieben

Dasselbe Beispiel wie oben, aber die Best Practice besteht darin, dies in einem try/catch zu umschließ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
  }
}

Eine `POST`-Anfrage für etwa eine Minute aufschieben und eine Funktion erstellen, um zu prüfen, 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;
}

Eine ausstehende Anfrage aktualisieren

In diesem Beispiel verwenden wir einen AbortController, 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 von fetchLater() würde eine Ausnahme auslösen:

// Only potentially trustworthy URLs are supported
fetchLater("http://untrusted.example.com");

// The length of the deferred request has to be known
fetchLater("https://origin.example.com", { body: someDynamicStream });

// Deferred fetching only works on active windows
const detachedWindow = iframe.contentWindow;
iframe.remove();
detachedWindow.fetchLater("https://origin.example.com");

Spezifikationen

No specification found

No specification data found for api.Window.fetchLater.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.