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 der Window-Schnittstelle erstellt einen verzögerten Abruf.

Eine fetchLater()-Anfrage wird gesendet, sobald die Seite verlassen wird (sei es, weil sie zerstört wird oder den bfcache betritt), 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 passiert (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 ein ReadableStream ist, können nicht verzögert werden.

Die fetchLater()-Methode wird durch die connect-src Content Security Policy-Direktive kontrolliert und nicht durch die Direktive der abgerufenen Ressourcen.

Syntax

fetchLater(resource)
fetchLater(resource, options)

Parameter

Die fetchLater()-Methode nimmt alle gleichen Parameter wie fetch() an, jedoch mit einer zusätzlichen activateAfter-Option.

resource

Dies definiert die Ressource, die Sie abrufen möchten. Identisch 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 liefert, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, welche die baseURI des Dokuments im Fensterkontext 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-Wertes, der definiert, wie lange das Ergebnis verzögert 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 dieser Funktion wurde gesperrt, da das verfügbare Kontingent überschritten wurde. Weitere Details finden Sie unter fetchLater()-Kontingente. Aufrufer von fetchLater() sollten in fast allen Fällen defensive Maßnahmen ergreifen und QuotaExceededError-Fehler abfangen, insbesondere wenn sie Drittanbieter-JavaScript einbetten.
RangeError DOMException: Ausgelöst, wenn ein negativer activateAfter-Wert angegeben wird.
TypeError DOMException: Zusätzlich zu den Gründen für fetch() wird diese Ausnahme auch für eine ReadableStream-Anfrage (die nicht verzögert werden kann) oder bei der Nutzung nicht vertrauenswürdiger URLs (wie http://) ausgelöst.

Rückgabewert

Ein FetchLaterResult, das eine activated-Boolesche Eigenschaft enthält, die angibt, ob die Anfrage bereits gesendet wurde.

Hinweis: Sobald die Abrufanforderung gesendet wird, wird ihre Antwort — einschließlich des Inhalts und der Header — nicht verfügbar gemacht und ignoriert.

Beispiele

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

Verzögern einer `GET`-Anfrage, bis die Seite verlassen oder geschlossen wird

fetchLater("/send_beacon");

Verzögern einer `POST`-Anfrage um etwa eine Minute

In diesem Beispiel erstellen wir einen Request und geben einen activateAfter-Wert an, um das Senden der Anfrage um 60.000 Millisekunden (oder eine Minute) zu verzögern:

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

Hinweis: Die tatsächliche Sendezeit ist unbekannt, da der Browser möglicherweise länger oder kürzer wartet, zum Beispiel, um das Batchen von verzögerten Abrufen zu optimieren.

Verzögern einer `POST`-Anfrage um etwa eine Minute mit try/catch

Dasselbe Beispiel wie oben, aber die bewährte Methode ist, dies in ein 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 einer `POST`-Anfrage um etwa eine Minute und eine Funktion erstellen, um zu überprüfen, ob 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 einen Fehler 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.