先查缓存再判断进行中请求，最后发起新请求。通过Map实现缓存与去重，减少重复请求、提升性能，适用于频繁点击、搜索补全等场景，需注意缓存有效期和错误处理。
在前端开发中，频繁的网络请求会影响性能和用户体验。通过实现缓存与去重策略，可以有效减少重复请求、降低服务器压力并提升响应速度。以下是使用 JavaScript 实现网络请求缓存与去重的核心思路和代码示例。
1. 使用 Map 实现请求缓存
将已成功返回的数据按请求参数存储，下次相同请求直接返回缓存结果。
关键点：
用 URL 和参数生成唯一键 设置可选的过期时间 返回 Promise 保持接口一致性
const cache = new Map();function generateKey(url, options) { const params = JSON.stringify(options?.body || {}); return `${url}#${options?.method || 'GET'}#${params}`;}async function cachedFetch(url, options = {}) { const key = generateKey(url, options); const cached = cache.get(key); if (cached && Date.now() < cached.expiry) { return cached.data; } try { const response = await fetch(url, options); const data = await response.json(); // 缓存10秒，可配置 cache.set(key, { data, expiry: Date.now() + 10000 }); return data; } catch (error) { // 若无缓存则抛出错误 if (!cached) throw error; return cached.data; }}
2. 防止重复请求（去重）
当相同请求同时发起时，避免创建多个 fetch 实例。共享同一个 Promise 可解决此问题。
立即学习“Java免费学习笔记（深入）”；
做法：
维护一个正在进行中的请求映射表 如果请求已在进行，返回对应的 Promise 请求结束后从表中清除
const pendingRequests = new Map();async function deduplicatedFetch(url, options = {}) { const key = generateKey(url, options); // 如果已有相同请求在进行，复用其 Promise if (pendingRequests.has(key)) { return pendingRequests.get(key); } const requestPromise = fetch(url, options) .then(async res => { if (!res.ok) throw new Error(res.statusText); return res.json(); }) .finally(() => { pendingRequests.delete(key); }); pendingRequests.set(key, requestPromise); return requestPromise;}
3. 结合缓存与去重的完整方案
先查缓存，再判断是否已有进行中的请求，最后发起新请求。
async function smartFetch(url, options = {}, { ttl = 10000 } = {}) { const key = generateKey(url, options); // 1. 检查缓存 const cached = cache.get(key); if (cached && Date.now() { if (!res.ok) throw new Error(res.statusText); const data = await res.json(); // 更新缓存 cache.set(key, { data, expiry: Date.now() + ttl }); return data; }) .catch(err => { // 请求失败但有旧缓存时返回旧数据 const fallback = cache.get(key); if (fallback) return fallback.data; throw err; }) .finally(() => { pendingRequests.delete(key); }); pendingRequests.set(key, requestPromise); return requestPromise;}
基本上就这些。这个方案适用于按钮频繁点击、自动补全搜索、轮询等场景。注意根据业务需求调整缓存有效期和清理策略，比如定期清空过期项或限制最大缓存数量。不复杂但容易忽略细节，尤其是错误处理和缓存更新时机。
以上就是如何用JavaScript实现一个网络请求的缓存与去重策略？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525725.html
微信扫一扫 
支付宝扫一扫 
