Window: fetchLater() Methode

Syntax

fetchLater(resource)
fetchLater(resource, options)

Parameter

Die fetchLater()-Methode akzeptiert dieselben Parameter wie fetch(), 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 bereitstellt, die Sie abrufen möchten. Die URL kann relativ zur Basis-URL sein, die in einem Fensterkontext das 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 verzögert werden soll, bevor es gesendet wird.

Ausnahmen

Die gleichen Ausnahmen wie für fetch() können für fetchLater() 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 die fetchLater()-Kontingente für weitere Details an. 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 für eine ReadableStream Anfrage ausgelöst (die nicht verzögert werden kann) oder für die Verwendung von unsicheren URLs (wie http://).

Rückgabewert

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

Beispiele

Der Artikel 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 für etwa eine Minute

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

Verzögern einer POST-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 einer POST-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 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

Browser-Kompatibilität

Siehe auch

• Verwendung von Deferred Fetch
• FetchLaterResult
• Fetch API