FetchEvent.request

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.

FetchEvent 接口的只读属性 request 返回触发事件处理程序的 Request。

这个属性是非空的（自从 Firefox 46 版本开始）。如果一个请求不是由其他方式提供的，构造函数的 options 对象必须包含一个请求（request）（参见 FetchEvent()）。

值

一个 Request 对象。

示例

来自 service worker fetch 示例的代码片段（fetch 示例的在线演示）。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;
        });
    }),
  );
});

规范

Specification
Service Workers
# fetch-event-request

浏览器兼容性

参见