CacheStorage: match() 方法

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

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

CacheStorage 接口的 match() 方法检查给定的Request 或 URL 字符串是否为存储的Response 的键。此方法返回一个对Response 的Promise，或者如果未找到匹配项，则返回一个解析为undefined 的Promise。

您可以在窗口中通过Window.caches 属性或在工作线程中通过WorkerGlobalScope.caches 属性访问 CacheStorage。

Cache 对象按创建顺序搜索。

注意：caches.match() 是一个便捷方法。等效的功能是在每个缓存上调用cache.match()（按caches.keys() 返回的顺序），直到返回Response 为止。

语法

js
match(request)
match(request, options)

参数

request

您要匹配的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。

cacheName

表示要搜索的特定缓存的字符串。

返回值

一个解析为匹配的Response 的Promise。如果未找到对指定请求的匹配响应，则 promise 解析为 undefined。

示例

此示例来自 MDN 简单服务工作者示例（参见 简单服务工作者正在运行）。在这里，我们等待FetchEvent 触发。我们构造一个自定义响应，如下所示

  1. 使用 CacheStorage.match() 检查CacheStorage 中是否找到对请求的匹配项。如果是，则提供该匹配项。
  2. 如果不是，则使用 open() 打开 v1 缓存，使用Cache.put() 将默认网络请求放入缓存中，并使用 return response.clone() 返回默认网络请求的克隆。最后一步是必要的，因为 put() 会消耗响应主体。
  3. 如果失败（例如，因为网络已断开），则返回一个回退响应。
js
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      // caches.match() always resolves
      // but in case of success response will have value
      if (response !== undefined) {
        return response;
      } else {
        return fetch(event.request)
          .then((response) => {
            // response may be used only once
            // we need to save clone to put one copy in cache
            // and serve second one
            let responseClone = response.clone();

            caches.open("v1").then((cache) => {
              cache.put(event.request, responseClone);
            });
            return response;
          })
          .catch(() => caches.match("/gallery/myLittleVader.jpg"));
      }
    }),
  );
});

规范

规范
Service Workers
# cache-storage-match

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅