预取数据到 map 缓存是提前加载高访问低更新的业务数据（如商品列表、活动配置）并存入内存，后续直接读取以跳过网络请求；map 因支持任意键类型、有序性及原生方法更适合作缓存容器；需控制预取时机、设置有效期、用 promise 缓存防重复请求。
预取数据到 Map 缓存，本质是在用户真正发起请求前，把大概率要用的数据提前拉下来、存进内存（比如 JavaScript 的 Map），后续调用时直接读取，跳过网络等待。这种方式轻量、可控、见效快，特别适合中低频变动的业务数据，比如商品列表、活动配置、用户基础信息等。
明确哪些数据值得预取
不是所有接口都适合预取。重点选那些：
- 访问频率高、但更新不频繁（如首页推荐位、固定分类标签）
- 影响首屏或关键路径（如登录后立即展示的账户概览）
- 响应慢或弱网下容易超时（如第三方聚合接口）
- 参数相对固定、可预测（如无动态 ID 或仅几个确定枚举值）
用 Map 实现简单可靠的缓存容器
Map 比普通对象更适合作为缓存载体：支持任意类型键（如对象、函数）、保留插入顺序、原生提供 has()/get()/delete() 方法。示例：
const dataCache = new Map();<br>// 预取并缓存商品分类<br>fetch('/api/categories')<br> .then(res => res.json())<br> .then(data => dataCache.set('categories', { data, timestamp: Date.now() }));<br><br>// 后续使用时直接取<br>function getCategories() {<br> const cached = dataCache.get('categories');<br> return cached && Date.now() - cached.timestamp ? Promise.resolve(cached.data)<br> : fetch('/api/categories').then(r => r.json());<br>}控制预取时机和生命周期
预取太早可能白忙，太晚失去意义。常见策略：
- 页面加载完成（
DOMContentLoaded）后异步触发，不阻塞渲染 - 用户停留超过 2 秒且未跳转时启动（防误入即退）
- 配合路由守卫，在进入某类页面前预取其依赖数据
- 设置缓存有效期（如 10 分钟），过期后下次调用再刷新，避免脏数据
处理并发与错误降级
多个地方同时调用同一预取数据时，要避免重复请求。可在 Map 中暂存 Promise：
const promiseCache = new Map();<br>function prefetch(key, fetcher) {<br> if (promiseCache.has(key)) return promiseCache.get(key);<br> const promise = fetcher().catch(err => {<br> promiseCache.delete(key); // 失败就清掉，下次重试<br> throw err;<br> });<br> promiseCache.set(key, promise);<br> return promise;<br>}这样即使 5 个组件同时调用 prefetch('userConfig', api.getUserConfig)，也只发一次请求。
