JavaScript前端缓存版本比对核心是通过ETag等显式标识校验数据新鲜度：服务端返回ETag，前端请求携带If-None-Match，匹配则返回304复用缓存，否则更新缓存并存储新ETag。

在 JavaScript 接口调用中实现前端缓存数据的版本比对，核心是让前端能识别缓存数据是否“过期”或“失效”，避免使用陈旧数据。这通常不依赖后端强制控制（如 Cache-Control），而是通过显式版本标识（如 ETag、version 字段 或 lastModified 时间戳）在请求/响应中传递，并在本地缓存时一并保存和校验。

1. 使用 ETag 实现服务端驱动的缓存比对

ETag 是服务端为资源生成的唯一标识（如哈希值或版本号），随响应头返回。前端可在后续请求中通过 If-None-Match 请求头携带上次获取的 ETag：

• 若服务端发现 ETag 匹配，返回 304 Not Modified，前端复用本地缓存；
• 若不匹配，返回 200 + 新数据 + 新 ETag，前端更新缓存。

示例（fetch 封装）：

const cache = new Map(); // 简单内存缓存：key → { data, etag }
async function fetchWithETag(url) {
  const cached = cache.get(url);
  const headers = {};
  if (cached?.etag) headers['If-None-Match'] = cached.etag;
  const res = await fetch(url, { headers });
  if (res.status === 304 && cached) {
    return cached.data;
  } else if (res.ok) {
    const data = await res.json();
    const etag = res.headers.get('ETag');
    cache.set(url, { data, etag });
    return data;
  }

相关文章

JavaScript 动态导入中怎么在图表渲染时按需加载大型库

JavaScript 事件循环中怎么通过代码把同步任务拆分为异步宏任务

JavaScript 中怎么去重包含多层嵌套对象的复杂数据

JavaScript 中怎么用构造函数结合原型模式优化内存占用

HTML怎么实现发票PDF文件上传

相关标签:

javascript java 前端

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：JavaScript 中怎么在接口调用中实现动态切换不同的后端服务域名 下一篇：JavaScript 数组的 `reduce` 方法怎么实现累加与复杂数据聚合