fetch 的 cache 参数控制请求与浏览器 HTTP 缓存的交互方式，共六种取值：default（遵循 HTTP 规则）、no-store（禁用缓存）、reload（强制网络请求并更新缓存）、no-cache（条件验证）、force-cache（强制用缓存）、only-if-cached（仅限缓存且需同源）；它不操作缓存存储本身，清缓存需用 Cache API。
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：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/data', { cache: 'reload' });这会触发一次全新请求，不复用任何缓存，适合用户点击“刷新列表”按钮时使用。
✅ 想“完全读缓存，不发请求”（离线可用或极速展示）
用 only-if-cached（需同源）：
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 缓存。
所以，别指望 cache: 'force-cache' 能读到你用 caches.put() 存进去的数据——那是两个世界。
不复杂但容易忽略
