先查缓存再判断进行中请求，最后发起新请求。通过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() < cached.expiry) {
return cached.data;
}
// 2. 检查是否有进行中的请求
if (pendingRequests.has(key)) {
return pendingRequests.get(key);
}
// 3. 发起新请求
const requestPromise = fetch(url, options)
.then(async res => {
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;
}
基本上就这些。这个方案适用于按钮频繁点击、自动补全搜索、轮询等场景。注意根据业务需求调整缓存有效期和清理策略，比如定期清空过期项或限制最大缓存数量。不复杂但容易忽略细节，尤其是错误处理和缓存更新时机。
