FetchEvent: request 屬性
注意:此功能僅在 Service Workers 中可用。
request 是 介面的一個只讀屬性,它返回觸發事件處理程式的 FetchEventRequest 物件。
此屬性不可為空(自 Firefox 46 版本起)。如果請求不是透過其他方式提供的,則建構函式 options 物件必須包含一個請求(請參閱 FetchEvent())。
值
一個 Request 物件。
示例
此程式碼片段摘自 Service Worker 預取示例(線上執行預取示例)。 事件處理程式監聽 onfetchfetch 事件。當事件觸發時,將一個 Promise 回傳給受控頁面,以供 FetchEvent.respondWith() 使用。此 Promise 會解析為 物件中第一個匹配的 URL 請求。如果沒有找到匹配項,則程式碼將從網路獲取響應。Cache
該程式碼還處理了從 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 |
瀏覽器相容性
載入中…