Request:cache 属性

cacheRequest 接口的只读属性,包含请求的缓存模式。它控制请求将如何与浏览器的 HTTP 缓存 交互。

一个 RequestCache 值。可用的值是

  • default — 浏览器在 HTTP 缓存中查找匹配的请求。
    • 如果找到匹配项且它是 新鲜的,则将从缓存中返回。
    • 如果找到匹配项但它是 陈旧的,浏览器将向远程服务器发出 条件请求。如果服务器指示资源未更改,则将从缓存中返回。否则,将从服务器下载资源,并更新缓存。
    • 如果没有找到匹配项,浏览器将发出普通请求,并使用下载的资源更新缓存。
  • no-store — 浏览器从远程服务器获取资源,而不先查看缓存,并且不会使用下载的资源更新缓存。
  • reload — 浏览器从远程服务器获取资源,而不先查看缓存,但随后会使用下载的资源更新缓存。
  • no-cache — 浏览器在 HTTP 缓存中查找匹配的请求。
    • 如果找到匹配项,无论是新鲜的还是陈旧的,浏览器都将向远程服务器发出 条件请求。如果服务器指示资源未更改,则将从缓存中返回。否则,将从服务器下载资源,并更新缓存。
    • 如果没有找到匹配项,浏览器将发出普通请求,并使用下载的资源更新缓存。
  • force-cache — 浏览器在 HTTP 缓存中查找匹配的请求。
    • 如果找到匹配项,无论是新鲜的还是陈旧的,都将从缓存中返回。
    • 如果没有找到匹配项,浏览器将发出普通请求,并使用下载的资源更新缓存。
  • only-if-cached — 浏览器在 HTTP 缓存中查找匹配的请求。 实验性
    • 如果找到匹配项,无论是新鲜的还是陈旧的,都将从缓存中返回。
    • 如果没有找到匹配项,浏览器将返回 504 网关超时 状态。
    如果请求的 mode"same-origin",则只能使用 "only-if-cached" 模式。如果请求的 redirect 属性为 "follow" 并且重定向不违反 "same-origin" 模式,则将遵循缓存的重定向。

示例

js
// Download a resource with cache busting, to bypass the cache
// completely.
fetch("some.json", { cache: "no-store" }).then((response) => {
  /* consume the response */
});

// Download a resource with cache busting, but update the HTTP
// cache with the downloaded resource.
fetch("some.json", { cache: "reload" }).then((response) => {
  /* consume the response */
});

// Download a resource with cache busting when dealing with a
// properly configured server that will send the correct ETag
// and Date headers and properly handle If-Modified-Since and
// If-None-Match request headers, therefore we can rely on the
// validation to guarantee a fresh response.
fetch("some.json", { cache: "no-cache" }).then((response) => {
  /* consume the response */
});

// Download a resource with economics in mind! Prefer a cached
// albeit stale response to conserve as much bandwidth as possible.
fetch("some.json", { cache: "force-cache" }).then((response) => {
  /* consume the response */
});

// Naive stale-while-revalidate client-level implementation.
// Prefer a cached albeit stale response; but update if it's too old.
// AbortController and signal to allow better memory cleaning.
// In reality; this would be a function that takes a path and a
// reference to the controller since it would need to change the value
let controller = new AbortController();
fetch("some.json", {
  cache: "only-if-cached",
  mode: "same-origin",
  signal: controller.signal,
})
  .catch((e) =>
    e instanceof TypeError && e.message === "Failed to fetch"
      ? { status: 504 } // Workaround for chrome; which fails with a TypeError
      : Promise.reject(e),
  )
  .then((res) => {
    if (res.status === 504) {
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "force-cache",
        mode: "same-origin",
        signal: controller.signal,
      });
    }
    const date = res.headers.get("date"),
      dt = date ? new Date(date).getTime() : 0;
    if (dt < Date.now() - 86_400_000) {
      // if older than 24 hours
      controller.abort();
      controller = new AbortController();
      return fetch("some.json", {
        cache: "reload",
        mode: "same-origin",
        signal: controller.signal,
      });
    }

    // Other possible conditions
    if (dt < Date.now() - 300_000)
      // If it's older than 5 minutes
      fetch("some.json", { cache: "no-cache", mode: "same-origin" }); // no cancellation or return value.
    return res;
  })
  .then((response) => {
    /* consume the (possibly stale) response */
  })
  .catch((error) => {
    /* Can be an AbortError/DOMException or a TypeError */
  });

规范

规范
Fetch 标准
# ref-for-dom-request-cache②

浏览器兼容性

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

另请参阅