Window: fetchLater() Methode

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

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 bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die im Kontext eines Fensters 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 vor dem Senden verzögert werden soll.

Ausnahmen

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

QuotaExceededError

Die Nutzung dieser Funktion wurde blockiert, da die verfügbare Quote überschritten wurde. Siehe fetchLater()-Quoten für weitere Details. Aufrufer von fetchLater() sollten defensiv codieren 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 für eine ReadableStream-Anfrage (die nicht verzögert werden kann) oder für die Verwendung von unsicheren URLs (wie http://) ausgelöst.

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.

Eine GET-Anfrage verzögern, bis die Seite verlassen oder geschlossen wird

fetchLater("/send_beacon");

Eine 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
});

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

Dasselbe Beispiel wie oben, jedoch ist es eine gute Praxis, dies in einen try/catch-Block 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
  }
}

Eine POST-Anfrage für etwa eine Minute verzögern und eine Funktion erstellen, um zu überprü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

Alle der folgenden Aufrufe von fetchLater() würden 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

Browser-Kompatibilität

Siehe auch

• Verwendung von Deferred Fetch
• FetchLaterResult
• Fetch API