JavaScript中怎么用Promise实现一个前端数据本地缓存的防抖拦截器-js教程-PHP中文网

通过 promise 实现前端数据本地缓存的防抖拦截器，核心是避免重复请求、复用未过期缓存、同一请求只发一次：1. 用请求方法+url+参数生成唯一 key 并封装 localstorage 读写（含过期校验）；2. 用 map 缓存 pending promise，相同 key 复用而非重发；3. 请求成功后写入带时间戳的缓存，reject 或 resolve 后均清理 pending。

javascript中怎么用promise实现一个前端数据本地缓存的防抖拦截器

用 Promise 实现前端数据本地缓存的防抖拦截器，核心是：**避免重复请求 + 缓存未过期数据 + 同一请求只发一次**。关键不在“防抖”本身（那是节流/防抖函数的事），而在于对相同请求参数做并发归并 + 缓存时效控制。

1. 缓存键生成与本地存储封装

缓存需唯一标识每个请求，通常用请求方法 + URL + 序列化参数生成 key；本地存储建议封装读写逻辑，自动处理 JSON 序列化和过期判断：

使用 localStorage 或 indexedDB（大容量场景）；小项目用 localStorage 即可
缓存值结构包含 data、timestamp、expiresIn（毫秒）
读取时先校验是否过期，过期则自动清理并返回 null

2. 请求归并：用 Map 缓存 pending 的 Promise

对同一 key 的多次调用，不发起新请求，而是复用正在执行的 Promise —— 这是“防抖拦截”的本质（更准确说是“请求去重”）：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

维护一个 Map>，key 是请求标识
首次调用时创建 Promise 并存入 Map；后续调用直接返回该 Promise
Promise resolve 后，从 Map 中删除（或保留一段时间供快速重试）
注意：reject 也要清理，否则错误状态会一直卡住后续请求

3. 缓存策略与请求触发逻辑

完整流程是：查缓存 → 未命中或已过期 → 归并请求 → 请求成功 → 写缓存 → 返回结果：

优先读缓存，命中且未过期就直接 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;
}
</p>

调用：fetchWithCache('/api/user', { method: 'GET' })，相同 URL 参数的并发调用会自动合并。