Fetch本身不内置缓存机制，但可通过HTTP缓存头（如Cache-Control）、Cache API（需Service Worker配合）和内存缓存（Map+TTL）三层协同实现高效可控的缓存优化。
Fetch 本身不内置缓存机制，但可以通过 HTTP 缓存头 + Cache API + 自定义逻辑 三层配合实现高效、可控的请求结果缓存优化。
利用 HTTP 缓存头自动缓存（最轻量）
服务端返回标准缓存响应头（如 Cache-Control: public, max-age=3600），浏览器会自动缓存响应，并在后续相同请求中复用。Fetch 默认遵循这些规则，无需额外代码。
- 确保后端正确设置
Cache-Control、ETag或Last-Modified - 客户端发起 Fetch 时不要显式禁用缓存：
避免写cache: 'no-store'或cache: 'no-cache'（除非明确需要） - 对 GET 请求，默认
cache: 'default'即可启用 HTTP 缓存
用 Cache API 手动控制缓存（更灵活）
适合需要离线支持、精确控制缓存生命周期或绕过 HTTP 头限制的场景。需先打开一个命名缓存，再手动存取。
- 缓存请求前先检查是否存在有效缓存：
async function cachedFetch(url) {
const cache = await caches.open('api-cache');
const cached = await cache.match(url);
if (cached) return cached.json();
<p>const response = await fetch(url);
if (response.ok) {
await cache.put(url, response.clone());
}
return response.json();
}- 注意：Cache API 只缓存完整 Response 对象，不能只存 JSON 数据；需用
response.clone()避免读取冲突 - 建议搭配 Service Worker 使用，否则页面刷新后缓存可能失效（取决于浏览器策略）
结合内存缓存 + 过期时间（简单实用）
对频繁调用、数据变动不频繁的接口（如配置、字典项），可用 Map + 时间戳做轻量级内存缓存。
立即学习“Java免费学习笔记（深入）”；
- 示例：5 分钟内重复请求直接返回缓存结果
const memoryCache = new Map();
<p>async function memoizedFetch(url, options = {}) {
const key = url + JSON.stringify(options);
const cached = memoryCache.get(key);
if (cached && Date.now() < cached.expiry) {
return cached.data;
}</p><p>const res = await fetch(url, options);
const data = await res.json();
memoryCache.set(key, {
data,
expiry: Date.now() + 5 <em> 60 </em> 1000 // 5分钟
});
return data;
}- 优点：无依赖、易调试、适合单页应用短期缓存
- 缺点：页面刷新即丢失；不适合大体积响应或需持久化的场景
缓存策略选择建议
按实际需求组合使用效果最佳：
- 静态资源、不变数据 → 优先靠服务端
Cache-Control+ CDN - 用户专属 API、需离线能力 → Cache API + Service Worker
- 临时状态、快速响应需求 → 内存缓存 + TTL 控制
- 敏感数据（如登录态）→ 禁用缓存或设
cache: 'no-store'
