JavaScript 中怎么在接口请求中使用缓存策略减少重复网络交互-js教程-PHP中文网

javascript无法直接控制http强缓存，但可通过localstorage+时间戳实现接口数据缓存，需序列化对象、校验过期时间；应按数据特性选择策略：敏感数据用sessionstorage，高实时数据设短ttl，低频数据设24小时ttl，post/put响应一般不缓存。

javascript 中怎么在接口请求中使用缓存策略减少重复网络交互

JavaScript 本身不能直接控制浏览器的 HTTP 强缓存（比如 Cache-Control），但可以通过封装请求逻辑、结合客户端存储和现代 API，主动管理接口数据的缓存行为，从而显著减少重复网络交互。

用 localStorage + 时间戳实现简单数据缓存

适合配置类、用户信息、新闻列表等更新不频繁的数据。关键点是：存数据时附带过期时间，读取前先校验是否有效。

请求前检查 localStorage 中是否存在对应 key，且未过期
过期或不存在则发起 fetch 请求，成功后写入缓存（含 timestamp）
注意：localStorage 只支持字符串，对象需 JSON 序列化

示例代码：

async function cachedFetch(url, options = {}) {
  const cacheKey = `cache_${url}`;
  const cached = localStorage.getItem(cacheKey);
  if (cached) {
    const { data, expires } = JSON.parse(cached);
    if (Date.now() const res = await fetch(url, options);
const data = await res.json();
// 缓存 5 分钟
const expires = Date.now() + 5 <em> 60 </em> 1000;
localStorage.setItem(cacheKey, JSON.stringify({ data, expires }));
return data;
}

用 Map 实现内存级函数缓存（Memoization）

适合纯计算型函数或参数确定、结果稳定的接口调用封装，比如根据 ID 查询用户详情的函数。

Java Maven Code Review

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

下载

用 Map 存储 {key → response}，key 可由 URL + 参数序列化生成
页面刷新即失效，适合单次会话内高频重复调用场景
比对象更安全（避免原型污染），支持任意类型 key

示例：

const cacheMap = new Map();
<p>function memoizedApiCall(url) {
const key = url;
if (cacheMap.has(key)) return Promise.resolve(cacheMap.get(key));</p><p>return fetch(url).then(res => res.json()).then(data => {
cacheMap.set(key, data);
return data;
});
}</p>

用 Cache API 配合 Service Worker 管理网络响应

这是最接近“真正请求缓存”的方案，适用于静态资源或固定路径的 GET 接口，支持离线访问。

必须在 Service Worker 中注册并监听 fetch 事件
可自定义策略：cache-first（优先缓存）、network-first（优先网络）、stale-while-revalidate（缓存+后台更新）
缓存的是 Request/Response 对象，保留状态码、headers 等完整信息

fetch 事件中典型 cache-first 写法：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});