JavaScript 中用 Map 实现 API 请求缓存，以 URL（或标准化请求标识）为 key，value 为含 data、timestamp 和 ttl 的对象，读取时校验过期时间，轻量可控，适用于 SPA 短期缓存。
用 JavaScript 的 Map 实现 API 请求缓存，核心是把请求 URL（或请求标识）作为 key，响应数据和时间戳作为 value，再配合过期判断实现简易缓存策略。它轻量、可手动控制、避免重复请求，适合中低频接口或离线优先场景。
缓存结构设计：URL + 响应 + 过期时间
Map 本身不支持自动过期，所以需要手动存入时间戳，并在读取时校验。推荐 value 存为对象：
- data：实际响应内容（如 JSON 数据）
-
timestamp：缓存写入时间（
Date.now()） - ttl（可选）：该条目的有效毫秒数（比如 5 * 60 * 1000 表示 5 分钟）
这样每条缓存自带生命周期信息，无需额外管理。
封装一个带缓存的 fetch 函数
下面是一个实用示例，使用 Map 缓存 GET 请求结果：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const cache = new Map();
<p>async function cachedFetch(url, options = {}, ttl = 5 <em> 60 </em> 1000) {
const key = url + JSON.stringify(options); // 简单键生成（仅适用于 GET）</p><p>// 检查缓存是否存在且未过期
const cached = cache.get(key);
if (cached && Date.now() - cached.timestamp < ttl) {
return Promise.resolve(cached.data);
}</p><p>// 发起真实请求
try {
const res = await fetch(url, options);
if (!res.ok) throw new Error(<code>HTTP ${res.status}</code>);</p><pre class="brush:php;toolbar:false;">const data = await res.json();
cache.set(key, { data, timestamp: Date.now(), ttl });
return data;} catch (err) { // 缓存失效或请求失败时，可选择抛出或返回旧缓存（需额外逻辑） throw err; } }
调用方式和原生 fetch 类似：cachedFetch('/api/user/123')。
注意事项与优化点
Map 缓存是内存级的，页面刷新即丢失，适合单页应用（SPA）内短期复用。使用时注意：
- key 要唯一且稳定：GET 参数顺序、空格、编码差异会导致不同 key；建议对查询参数做标准化（如排序后拼接）
- 避免缓存敏感数据：登录态、个人隐私类接口慎用，或设置极短 ttl
-
手动清理能力：提供
clear()或按 key 删除方法，便于调试或登出时清空 -
并发请求重复触发：当前实现未防抖，同一 URL 多次快速调用仍可能发多次请求；进阶可用
Promise缓存 +then共享解决
扩展：支持 POST 或复杂请求的缓存键生成
对于非 GET 请求，不能只靠 URL。可基于请求方法 + URL + body 内容哈希生成 key（简单场景可用 JSON.stringify(body)），例如：
function generateCacheKey(url, options) {
const { method = 'GET', body } = options;
if (method.toUpperCase() === 'GET') return url;
return `${url}:${method}:${JSON.stringify(body)}`;
}再将此 key 传入 cache.get() 即可。注意 body 必须是可序列化的对象（不能含函数、undefined、Date 等）。
