JavaScript 中 Fetch 怎么实现请求结果缓存优化-js教程-PHP中文网

fetch本身不内置缓存机制，但可通过http缓存头（如cache-control）、cache api（需service worker配合）和内存缓存（map+ttl）三层协同实现高效可控的缓存优化。

javascript 中 fetch 怎么实现请求结果缓存优化

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 头限制的场景。需先打开一个命名缓存，再手动存取。

Java Maven Code Review

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

下载

缓存请求前先检查是否存在有效缓存：

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();
}</p>

注意：Cache API 只缓存完整 Response 对象，不能只存 JSON 数据；需用 response.clone() 避免读取冲突
建议搭配 Service Worker 使用，否则页面刷新后缓存可能失效（取决于浏览器策略）

结合内存缓存 + 过期时间（简单实用）

对频繁调用、数据变动不频繁的接口（如配置、字典项），可用 Map + 时间戳做轻量级内存缓存。

示例：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() </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;
}</p>