FetchEvent: request-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Hinweis: Diese Funktion ist nur in Service Workers verfügbar.

Die request-Schreibgeschützte Eigenschaft des FetchEvent-Interfaces gibt das Request zurück, das den Event-Handler ausgelöst hat.

Diese Eigenschaft ist nicht-nullbar (seit Version 46, im Fall von Firefox.) Wenn eine Anfrage nicht auf andere Weise bereitgestellt wird, muss das options-Objekt des Konstruktors eine Anfrage enthalten (siehe FetchEvent().)

Wert

Ein Request-Objekt.

Beispiele

Dieses Code-Snippet stammt aus dem Service Worker Fetch-Beispiel (führen Sie das Fetch-Beispiel live aus). Der onfetch-Event-Handler lauscht auf das fetch-Ereignis. Wenn es ausgelöst wird, übergibt er ein Promise zurück zur kontrollierten Seite an FetchEvent.respondWith(). Dieses Promise wird auf die erste übereinstimmende URL-Anfrage im Cache-Objekt aufgelöst. Wenn keine Übereinstimmung gefunden wird, ruft der Code eine Antwort aus dem Netzwerk ab.

Der Code behandelt auch Ausnahmen, die von der fetch()-Operation ausgelöst werden. Beachten Sie, dass eine HTTP-Fehlerantwort (z. B. 404) keine Ausnahme auslösen wird. Es wird ein normales Antwortobjekt zurückgegeben, das den entsprechenden Fehlercode gesetzt hat.

js
self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        console.log("Found response in cache:", response);

        return response;
      }
      console.log("No response found in cache. About to fetch from network…");

      return fetch(event.request)
        .then((response) => {
          console.log("Response from network is:", response);

          return response;
        })
        .catch((error) => {
          console.error("Fetching failed:", error);

          throw error;
        });
    }),
  );
});

Spezifikationen

Specification
Service Workers
# fetch-event-request

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch