Window: fetchLater()-Methode

Syntax

fetchLater(resource)
fetchLater(resource, options)

Parameter

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

resource

Gibt die Ressource an, die Sie abrufen möchten. Wie bei fetch() kann dies Folgendes sein:

• Ein String oder ein anderes Objekt mit einem stringifier – einschließlich eines URL-Objekts –, das die URL der abzurufenden Ressource bereitstellt. Die URL kann relativ zur Basis-URL sein. Im Fensterkontext ist dies die baseURI des Dokuments.
• Ein Request-Objekt.

options Optional

Ein DeferredRequestInit-Objekt mit benutzerdefinierten Einstellungen für die Anfrage. Dazu gehört ein activateAfter-Timeout, das festlegt, wie lange das Senden der Anfrage verzögert werden soll.

Ausnahmen

Für fetchLater() können dieselben Ausnahmen wie für fetch() sowie die folgenden zusätzlichen Ausnahmen ausgelöst werden:

QuotaExceededError

Die Verwendung dieser Funktion wurde blockiert, weil das verfügbare Kontingent überschritten wurde. Weitere Informationen finden Sie unter Kontingente für fetchLater(). Aufrufender Code sollte auf QuotaExceededError vorbereitet sein und diesen Fehler in fast allen Fällen abfangen, insbesondere wenn JavaScript von Drittanbietern eingebunden wird.

RangeError

Wird ausgelöst, wenn für activateAfter ein negativer Wert angegeben wird.

TypeError

Zusätzlich zu den Gründen, die für fetch() gelten, wird diese Ausnahme auch bei einer Anfrage mit einem ReadableStream (die nicht verzögert werden kann) oder bei der Verwendung nicht vertrauenswürdiger URLs (z. B. http://) ausgelöst.

Rückgabewert

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

Beispiele

Der Artikel zu den Kontingenten für fetchLater() enthält Beispiele dafür, wie die Kontingente angewendet werden.

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

fetchLater("/send_beacon");

Eine POST-Anfrage um etwa eine Minute verzögern

In diesem Beispiel erstellen wir einen Request und geben für activateAfter einen 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 mit try/catch um etwa eine Minute verzögern

Dies ist dasselbe Beispiel wie oben. Es empfiehlt sich jedoch, den Code 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 um etwa eine Minute verzögern und eine Funktion zur Prüfung des Sendestatus erstellen

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

Browser-Kompatibilität

Siehe auch

• Deferred Fetch verwenden
• FetchLaterResult
• Fetch API