通过 Promise 实现前端数据本地缓存的防抖拦截器，核心是避免重复请求、复用未过期缓存、同一请求只发一次：1. 用请求方法+URL+参数生成唯一 key 并封装 localStorage 读写（含过期校验）；2. 用 Map 缓存 pending Promise，相同 key 复用而非重发；3. 请求成功后写入带时间戳的缓存，reject 或 resolve 后均清理 pending。
用 Promise 实现前端数据本地缓存的防抖拦截器，核心是：**避免重复请求 + 缓存未过期数据 + 同一请求只发一次**。关键不在“防抖”本身（那是节流/防抖函数的事），而在于对相同请求参数做并发归并 + 缓存时效控制。
1. 缓存键生成与本地存储封装
缓存需唯一标识每个请求，通常用请求方法 + URL + 序列化参数生成 key；本地存储建议封装读写逻辑，自动处理 JSON 序列化和过期判断：
- 使用 localStorage 或 indexedDB（大容量场景）；小项目用 localStorage 即可
- 缓存值结构包含 data、timestamp、expiresIn（毫秒）
- 读取时先校验是否过期，过期则自动清理并返回 null
2. 请求归并：用 Map 缓存 pending 的 Promise
对同一 key 的多次调用，不发起新请求，而是复用正在执行的 Promise —— 这是“防抖拦截”的本质（更准确说是“请求去重”）：
- 维护一个 Map<string, Promise<any>>，key 是请求标识
- 首次调用时创建 Promise 并存入 Map；后续调用直接返回该 Promise
- Promise resolve 后，从 Map 中删除（或保留一段时间供快速重试）
- 注意：reject 也要清理，否则错误状态会一直卡住后续请求
3. 缓存策略与请求触发逻辑
完整流程是：查缓存 → 未命中或已过期 → 归并请求 → 请求成功 → 写缓存 → 返回结果：
立即学习“Java免费学习笔记（深入）”；
- 优先读缓存，命中且未过期就直接 resolve 缓存数据
- 未命中时，才进入 pending Map 归并逻辑
- 实际请求由 fetch / axios 等发起，成功后写入缓存（含时间戳）
- 可选：支持强制刷新（如加 { force: true } 参数跳过缓存）
4. 使用示例：封装成通用 fetchWithCache 函数
下面是一个轻量实现（基于 fetch + localStorage）：
const pending = new Map();
const CACHE_TTL = 5 * 60 * 1000; // 5 分钟
<p>function getCacheKey(url, params) {
return <code>${url}?${new URLSearchParams(params).toString()}</code>;
}</p><p>function readCache(key) {
const item = localStorage.getItem(key);
if (!item) return null;
const { data, timestamp, expiresIn } = JSON.parse(item);
if (Date.now() - timestamp > expiresIn) {
localStorage.removeItem(key);
return null;
}
return data;
}</p><p>function writeCache(key, data) {
localStorage.setItem(key, JSON.stringify({
data,
timestamp: Date.now(),
expiresIn: CACHE_TTL
}));
}</p><p>async function fetchWithCache(url, options = {}) {
const { method = 'GET', body, cache = true, force = false } = options;
const params = method === 'GET' ? Object.fromEntries(new URL(url).searchParams) : {};
const key = getCacheKey(url, params);</p><p>if (cache && !force) {
const cached = readCache(key);
if (cached !== null) return cached;
}</p><p>if (pending.has(key)) {
return pending.get(key);
}</p><p>const promise = (async () => {
try {
const res = await fetch(url, { method, body });
if (!res.ok) throw new Error(res.statusText);
const data = await res.json();
if (cache) writeCache(key, data);
return data;
} finally {
pending.delete(key);
}
})();</p><p>pending.set(key, promise);
return promise;
}
调用：fetchWithCache('/api/user', { method: 'GET' })，相同 URL 参数的并发调用会自动合并。
