FetchEvent: request 屬性

Baseline 已廣泛支援

此功能已成熟,可跨多種裝置和瀏覽器版本工作。它自 ⁨2018 年 4 月⁩ 起已在所有瀏覽器中可用。

注意:此功能僅在 Service Workers 中可用。

requestFetchEvent 介面的一個只讀屬性,它返回觸發事件處理程式的 Request 物件。

此屬性不可為空(自 Firefox 46 版本起)。如果請求不是透過其他方式提供的,則建構函式 options 物件必須包含一個請求(請參閱 FetchEvent())。

一個 Request 物件。

示例

此程式碼片段摘自 Service Worker 預取示例線上執行預取示例)。onfetch 事件處理程式監聽 fetch 事件。當事件觸發時,將一個 Promise 回傳給受控頁面,以供 FetchEvent.respondWith() 使用。此 Promise 會解析為 Cache 物件中第一個匹配的 URL 請求。如果沒有找到匹配項,則程式碼將從網路獲取響應。

該程式碼還處理了從 fetch() 操作中丟擲的異常。請注意,HTTP 錯誤響應(例如 404)不會觸發異常。它將返回一個具有適當錯誤程式碼設定的正常響應物件。

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

規範

規範
Service Workers
# fetch-event-request

瀏覽器相容性

另見