前端接口请求缓存需手动拦截请求并检查本地缓存有效性：命中则返回缓存数据，过期则发起新请求并更新；支持 localStorage（持久化）和 Map（内存级、高性能）两种存储，配合 TTL 过期策略与懒清理机制。
前端接口请求缓存的核心在于：**手动拦截请求、检查本地缓存有效性、命中则跳过网络请求、过期则自动更新并清理旧数据**。JavaScript 本身不提供内置的 HTTP 缓存控制（那是浏览器或 Service Worker 层的事），但你可以在应用层用 fetch 或 axios 封装一层智能缓存逻辑。
缓存存储与有效期标记
把响应数据 + 时间戳 + 过期时间（如 TTL）一起存入 localStorage 或 sessionStorage，推荐用 localStorage 配合 JSON 序列化：
- 每次请求前，先读取对应 key 的缓存项，解析出
data、timestamp和ttl（单位毫秒） - 判断
Date.now() - timestamp 是否成立；成立即为命中，直接返回缓存数据 - 若过期或无缓存，则发起真实请求，并在成功后写入新缓存（覆盖旧值）
用 Map 实现内存级缓存（适合单页生命周期）
比 localStorage 更快、支持引用类型、无需序列化，适合短期高频请求（如搜索建议、用户信息）：
- 创建一个全局
const memoryCache = new Map() - key 可设为请求 URL + 序列化后的参数（如
JSON.stringify({ url, params })） - value 存对象：
{ data, expiresAt: Date.now() + 5 * 60 * 1000 }（5 分钟后过期） - 每次读取前检查
expiresAt > Date.now()，过期则cache.delete(key)
自动清理过期缓存（避免堆积）
不能只等下次请求时才清理，需主动维护缓存健康度：
立即学习“Java免费学习笔记（深入）”；
- 在应用启动或页面加载时，遍历 localStorage 中所有缓存 key，解析时间戳，批量删除过期项
- 对内存 Map，可加一个定时器（如每 5 分钟）执行
cache.forEach((v, k) => v.expiresAt - 更稳妥的做法是：每次读取缓存时顺手清理该条目，再返回结果（懒清理，无性能压力）
配合请求库封装成可复用函数（以 fetch 为例）
下面是一个轻量缓存请求函数示例：
async function cachedFetch(url, options = {}, { ttl = 5 * 60 * 1000, cacheKey } = {}) {
const key = cacheKey || url;
const cached = localStorage.getItem(key);
<p>if (cached) {
const { data, timestamp, expiresAt } = JSON.parse(cached);
if (Date.now() < expiresAt) return data; // 命中
}</p><p>try {
const res = await fetch(url, options);
const data = await res.json();
localStorage.setItem(key, JSON.stringify({
data,
timestamp: Date.now(),
expiresAt: Date.now() + ttl
}));
return data;
} catch (e) {
if (cached) return JSON.parse(cached).data; // 网络失败且有缓存，降级返回
throw e;
}
}调用：cachedFetch('/api/user/123', {}, { ttl: 10 * 60 * 1000, cacheKey: 'user_123' })
不复杂但容易忽略细节：缓存键要唯一区分不同参数、GET 请求参数变化必须影响 key、POST 等非幂等请求一般不缓存、敏感数据避免存 localStorage。
