此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

FetchEvent.request

基线 广泛可用

自 2018年4月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

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

规范

规范
Service Workers Nightly
# fetch-event-request

浏览器兼容性

参见