JavaScript中Fetch怎么利用cache参数配置强制刷新或完全读取本地缓存-js教程-PHP中文网

fetch 的 cache 参数控制请求与浏览器 http 缓存的交互方式，共六种取值：default（遵循 http 规则）、no-store（禁用缓存）、reload（强制网络请求并更新缓存）、no-cache（条件验证）、force-cache（强制用缓存）、only-if-cached（仅限缓存且需同源）；它不操作缓存存储本身，清缓存需用 cache api。

javascript中fetch怎么利用cache参数配置强制刷新或完全读取本地缓存

fetch 的 cache 参数用于控制请求是否走浏览器 HTTP 缓存，但它不能强制刷新缓存内容本身，也不能“完全读取本地缓存”而跳过网络——它只是告诉浏览器如何与已有缓存交互。真正决定是否发网络请求、是否复用缓存、是否忽略缓存的，是这个参数的取值逻辑。

cache 参数的六种取值及行为

cache 是 fetch 第二个参数（init 对象）中的一个字段，合法值有：

default：默认行为。遵循 HTTP 缓存规则（如 Cache-Control、ETag），可能读缓存，也可能发请求验证。
no-store：完全禁用缓存。每次请求都绕过缓存，直接发起网络请求，且响应也不会被存入缓存。
reload：强制发起网络请求，且忽略所有缓存（包括已存在的）；响应会写入缓存（除非服务器禁止）。
no-cache：强制验证缓存有效性。浏览器会发带 If-None-Match / If-Modified-Since 的条件请求，服务器 304 则复用本地缓存，200 则更新缓存并返回新内容。
force-cache：强制使用缓存（即使过期）。只要缓存存在，就直接返回，不发网络请求；仅当缓存不存在时才走网络。
only-if-cached：只从缓存读，绝不发网络请求。若缓存中无匹配项，Promise 直接 reject（状态码 504），常用于离线场景。

⚠️ 注意：only-if-cached 必须配合 same-origin 模式使用（即不能跨域），否则会报错。

常见需求对应写法

✅ 想“强制刷新”（丢弃旧缓存，重新拉最新数据）

用 reload：

fetch('/api/data', { cache: 'reload' });

这会触发一次全新请求，不复用任何缓存，适合用户点击“刷新列表”按钮时使用。

✅ 想“完全读缓存，不发请求”（离线可用或极速展示）

用 only-if-cached（需同源）：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

try {
  const res = await fetch('/api/profile', { cache: 'only-if-cached', credentials: 'same-origin' });
  const data = await res.json();
  render(data);
} catch (err) {
  console.log('缓存中无数据，可能处于离线状态');
}

✅ 想“优先用缓存，但确保不是过期数据”

用 no-cache：

fetch('/api/news', { cache: 'no-cache' });

浏览器会发条件请求，服务端返回 304 就快，200 就更新——兼顾速度与新鲜度。

❌ 不能靠 `cache` 参数实现“强制清空某条缓存”

cache 是请求级策略，不操作缓存存储本身。要清理特定 URL 的缓存，需借助 Cache API（如 caches.open().then(cache => cache.delete(url))），且通常需 Service Worker 配合。

和 Cache API 的关键区别

cache 参数影响的是 HTTP 缓存层（disk/memory cache），由浏览器自动管理；
Cache API（caches.open() 等）操作的是 Cache Storage（独立的缓存存储空间），需要手动写入/读取，常用于 PWA 离线能力；
二者互不干扰：fetch 默认不写入 Cache Storage，即使设了 cache: 'default'，也只走 HTTP 缓存。