缓存：match() 方法

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

注意：此功能在Web Workers中可用。

match() 方法是 Cache 接口的方法，它返回一个 Promise，该 Promise 解析为与 Cache 对象中第一个匹配请求关联的 Response。如果未找到匹配项，则 Promise 解析为 undefined。

语法

js
match(request)
match(request, options)

参数

request

您尝试在 Cache 中查找响应的 Request。这可以是 Request 对象或 URL 字符串。

options 可选

一个对象，用于设置 match 操作的选项。可用的选项是

ignoreSearch

一个布尔值，指定是否忽略 URL 中的查询字符串。例如，如果设置为 true，则在执行匹配时将忽略 http://foo.com/?value=bar 的 ?value=bar 部分。默认为 false。

ignoreMethod

一个布尔值，当设置为 true 时，会阻止匹配操作验证 Request 的 http 方法（通常仅允许 GET 和 HEAD）。默认为 false。

ignoreVary

一个布尔值，当设置为 true 时，会告诉匹配操作不要执行 VARY 标头匹配，即如果 URL 匹配，则无论 Response 对象是否具有 VARY 标头，您都将获得匹配。默认为 false。

返回值

一个 Promise，它解析为第一个与请求匹配的 Response，或者如果未找到匹配项，则解析为 undefined。

注意：Cache.match() 与 Cache.matchAll() 基本相同，只是它解析为第一个匹配的响应（即 response[0]），而不是解析为所有匹配响应的数组。

示例

此示例取自 自定义离线页面 示例（实时演示）。它使用缓存在请求失败时提供选定的数据。当对 fetch() 的调用引发异常时，会触发 catch() 子句。在 catch() 子句中，match() 用于返回正确的响应。

在此示例中，仅使用 GET HTTP 动词检索的 HTML 文档将被缓存。如果我们的 if () 条件为假，则此 fetch 处理程序将不会拦截请求。如果注册了任何其他 fetch 处理程序，则它们将有机会调用 event.respondWith()。如果没有任何 fetch 处理程序调用 event.respondWith()，则浏览器将处理请求，就像没有服务工作者参与一样。如果 fetch() 返回一个有效的 HTTP 响应，并且响应代码在 4xx 或 5xx 范围内，则不会调用 catch()。

js
self.addEventListener("fetch", (event) => {
  // We only want to call event.respondWith() if this is a GET request for an HTML document.
  if (
    event.request.method === "GET" &&
    event.request.headers.get("accept").includes("text/html")
  ) {
    console.log("Handling fetch event for", event.request.url);
    event.respondWith(
      fetch(event.request).catch((e) => {
        console.error("Fetch failed; returning offline page instead.", e);
        return caches
          .open(OFFLINE_CACHE)
          .then((cache) => cache.match(OFFLINE_URL));
      }),
    );
  }
});

规范

规范
Service Workers
# cache-match

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅