Fetch 的 cache 参数决定浏览器如何复用缓存响应，而非禁用缓存；其值包括 default（遵HTTP头）、no-store（不读不写）、reload（强制网络请求）、no-cache（先校验）、force-cache（优先用过期缓存）、only-if-cached（仅缓存，无则报错）。
Fetch 的 cache 参数直接决定请求是否复用浏览器已缓存的响应，而不是简单地“禁用缓存”。它不绕过 HTTP 缓存规则，而是告诉浏览器在满足缓存条件的前提下，如何决策：是读缓存、忽略缓存、还是强制校验。
cache 参数的可选值及行为
该参数取值为字符串，常见选项有：
-
'default'：默认行为。遵循 HTTP 缓存头（如
Cache-Control、Expires）。若响应可缓存且未过期，直接返回缓存；否则发起网络请求。 - 'no-store'：完全跳过缓存读写。每次请求都走网络，响应也不存入缓存。适合敏感数据或调试场景。
- 'reload'：强制发起新请求，忽略所有本地缓存（包括 memory cache 和 disk cache），但响应仍可能被缓存（取决于响应头）。
-
'no-cache'：允许读缓存，但必须先向服务器验证（发送带
If-None-Match或If-Modified-Since的条件请求）。服务器返回 304 时复用缓存，200 则更新缓存并返回新内容。 - 'force-cache'：尽可能使用缓存，即使已过期也先返回缓存内容（stale-while-revalidate 类似效果），再异步校验更新。注意：不是所有浏览器都完全支持此行为，尤其在过期严重时可能仍发请求。
-
'only-if-cached'：只从缓存中取，不发起网络请求。若无可用缓存则报错（
TypeError: Failed to fetch）。常配合credentials: 'omit'使用，避免跨域问题。
与 HTTP 缓存头的协同关系
cache 参数不会覆盖服务器返回的缓存控制头，而是与之配合工作：
- 例如服务端返回
Cache-Control: no-cache，此时即使设置cache: 'default'，浏览器也会按需校验（等效于cache: 'no-cache'）。 - 若服务端返回
Cache-Control: immutable, max-age=3600，那么cache: 'default'会在 1 小时内直接返回缓存，不校验；而cache: 'no-cache'仍会强制校验。 -
cache: 'no-store'是唯一能彻底屏蔽缓存写入的选项，无论响应头怎么写，都不会存。
实际使用建议
根据业务需求选择合适策略：
- 获取静态资源（JS/CSS/图片）：用
cache: 'default'，让浏览器自然遵循服务端缓存策略。 - 用户登录态、支付结果等关键接口：用
cache: 'no-store'，杜绝任何缓存风险。 - 列表页下拉刷新：用
cache: 'no-cache'，兼顾体验（缓存未失效时秒出）和一致性（失效时自动更新）。 - 离线优先应用：可结合
cache: 'only-if-cached'+catch捕获失败，降级到本地 fallback 数据。
注意点
几个容易踩坑的地方：
-
cache参数对POST、PUT等非幂等请求通常无效（浏览器一般不缓存），真正起作用的多是GET和HEAD请求。 - Service Worker 中拦截 fetch 时，
cache参数会影响fetch()在 SW 内部的行为，但最终是否缓存还取决于 SW 自己的逻辑（比如是否调用cache.put()）。 - DevTools 的 “Disable cache” 开关会覆盖
cache参数的效果（仅限开发者工具开启时），上线后不生效。
