缓存：put() 方法

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

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

put() 方法是 Cache 接口的方法，允许将键值对添加到当前 Cache 对象。

通常，您只需 fetch() 一个或多个请求，然后将结果直接添加到缓存中。在这种情况下，最好使用 Cache.add()/Cache.addAll()，因为它们是这些操作的简写函数。

js
fetch(url).then((response) => {
  if (!response.ok) {
    throw new TypeError("Bad response status");
  }
  return cache.put(url, response);
});

注意：put() 会覆盖之前存储在缓存中与请求匹配的任何键值对。

注意：Cache.add/Cache.addAll 不缓存 Response.status 值不在 200 范围内的响应，而 Cache.put 允许您存储任何请求/响应对。因此，Cache.add/Cache.addAll 不能用于存储不透明响应，而 Cache.put 可以。

语法

js
put(request, response)

参数

request

要添加到缓存的 Request 对象或 URL。

response

要与请求匹配的 Response。

返回值

解析为 undefined 的 Promise。

异常

TypeError

如果 URL 方案不是 http 或 https，则返回。

示例

此示例来自 MDN simple-service-worker 示例（请参见 simple-service-worker 正在运行）。在这里，我们等待 FetchEvent 事件触发。我们像这样构造一个自定义响应

  1. 使用 CacheStorage.match() 检查 CacheStorage 中是否找到与请求匹配的项。如果找到，则提供该项。
  2. 如果没有找到，则使用 open() 打开 v1 缓存，使用 Cache.put() 将默认网络请求放入缓存，并使用 return response.clone() 返回默认网络请求的克隆。需要克隆，因为 put() 会消耗响应主体。
  3. 如果失败（例如，网络连接断开），则返回一个备用响应。
js
let response;
const cachedResponse = caches
  .match(event.request)
  .then((r) => (r !== undefined ? r : fetch(event.request)))
  .then((r) => {
    response = r;
    caches.open("v1").then((cache) => {
      cache.put(event.request, response);
    });
    return response.clone();
  })
  .catch(() => caches.match("/gallery/myLittleVader.jpg"));

规范

规范
Service Workers
# cache-put

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅