Window: fetchLater() Methode

Syntax

fetchLater(resource)
fetchLater(resource, options)

Parameter

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

resource

Dies definiert die Ressource, die Sie abrufen möchten. Identisch zu 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 im Kontext des Fensters die baseURI des Dokuments ist.
• Ein Request-Objekt.

options Optional

Ein DeferredRequestInit-Objekt, das benutzerdefinierte 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

Die Nutzung dieser Funktion wurde blockiert, weil das verfügbare Kontingent überschritten wurde. Siehe fetchLater()-Quoten für mehr Details. Benutzer 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 bei fetch() wird diese Ausnahme auch für eine ReadableStream-Anfrage ausgelöst (die nicht verzögert werden kann) oder für die Nutzung von unzuverlässigen URLs (wie http://).

Rückgabewert

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

Beispiele

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

Einen GET-Request verzögern, bis die Seite verlassen oder geschlossen wird

fetchLater("/send_beacon");

Einen POST-Anfrage für etwa eine Minute verzögern

In diesem Beispiel erstellen wir eine 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
});

Einen POST-Anfrage für etwa eine Minute mit try/catch verzögern

Dasselbe Beispiel wie oben, aber die beste Praxis ist, dies 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
  }
}

Einen POST-Anfrage für etwa eine Minute verzögern 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 einen Fehler werfen:

// 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

Browser-Kompatibilität

Siehe auch

• fetchLater() API
• fetchLater()-Quoten
• FetchLaterResult
• Fetch API