fetch 本身不提供缓存过期控制，需应用层手动管理：缓存响应数据并记录时间戳，读取时校验是否超时，支持内存、localstorage 或 indexeddb 等多种存储方式。

Fetch 本身不提供缓存过期控制机制，要实现请求结果的“过期失效”，需在应用层手动管理响应缓存及其生命周期，核心思路是：缓存响应数据 + 记录获取时间 + 使用前校验是否过期。

缓存响应并记录时间戳

发起请求后，把响应数据（如 JSON）和当前时间一起存入内存、localStorage 或 IndexedDB。时间戳用于后续判断是否过期。

• 内存缓存适合单页内短期复用，页面刷新即丢失
• localStorage 适合跨会话保留，但注意存储大小限制和同源策略
• IndexedDB 更适合大量或结构化缓存，支持事务和查询

读取时检查是否过期

下次请求前，先查缓存。若存在且未超时，直接返回缓存结果；否则发起新 fetch 请求。

例如设置 5 分钟过期：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const cacheKey = '/api/user';
const cached = localStorage.getItem(cacheKey);
if (cached) {
  const { data, timestamp } = JSON.parse(cached);
  if (Date.now() - timestamp     return data; // 未过期，直接用
  }
}
// 过期或无缓存，执行 fetch

封装成可复用的缓存 fetch 函数

把缓存逻辑封装为通用函数，支持自定义过期时间（毫秒）和缓存位置。

• 参数包括 url、options、maxAge（毫秒）、storage（如 localStorage）
• 响应成功后自动缓存，含 status、headers（可选）、json 数据和时间戳
• 对 4xx/5xx 响应也可选择性缓存（如降级兜底），但需谨慎处理

配合服务端 Cache-Control 更可靠

前端缓存只是补充。建议服务端响应头带上 Cache-Control: max-age=300，浏览器会自动处理强缓存；再结合 fetch 的 cache: 'no-store' 或 'default' 控制是否走浏览器缓存。

注意：fetch 的 cache 选项影响的是浏览器 HTTP 缓存，不是 JS 层面的数据缓存。两者可叠加使用，但职责不同——前者由浏览器管理，后者由你控制逻辑与时效。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南