在一个前端页面中，有三个组件都会请求同一个 API，导致该 API 被发送了 3 次请求。请问有哪些优化方案可以减少或避免这种重复请求？
考察说明
考查候选人对于前端重复请求问题的优化思路，以及是否了解常见的请求合并、缓存和状态管理方案。
回答思路
- 【回答框架 1】首先明确问题本质：多个组件独立发起相同请求，造成网络资源浪费和潜在的数据不一致。核心优化思路是让多个请求共享同一个 Promise 或结果。
- 【回答框架 2】方案一：请求去重（Request Deduplication）。在请求层维护一个 Map，以请求的 key（如 URL + 参数）为键，值为进行中的 Promise。当新请求发起时，若 key 已存在，直接返回该 Promise，避免重复发送。请求完成后删除 key。
- 【回答框架 3】方案二：全局状态管理（如 Redux、Vuex）或数据缓存。将 API 数据存入全局 store 或缓存中，组件从 store 读取数据，若数据不存在或过期再发起请求。可结合时间戳或版本号控制缓存失效。
- 【回答框架 4】方案三：组件间通信或提升状态。将请求提升到父组件或公共模块，由父组件统一请求后通过 props 或 context 分发给子组件，避免每个组件各自请求。
- 【回答框架 5】方案四：使用 HTTP 缓存（如浏览器缓存、CDN 缓存）或 Service Worker。对于 GET 请求，可设置合适的缓存策略，让浏览器直接返回缓存结果，减少网络请求。但需注意缓存更新策略。
- 【关键点 1】请求去重通过共享 Promise 避免重复发送相同请求。
- 【关键点 2】全局状态管理或缓存可减少重复请求并提升数据一致性。
- 【关键点 3】提升状态到父组件或公共模块可避免组件各自请求。
- 【关键点 4】HTTP 缓存和 Service Worker 可减少网络请求，但需注意缓存策略。
- 【关键点 5】优化方案需结合业务场景，权衡实时性和资源消耗。
- 【易错点 1】请求去重时若请求失败，需清理缓存，否则后续请求会一直复用失败的 Promise。
- 【易错点 2】缓存数据可能过期，需设置合理的失效策略，避免展示陈旧数据。
- 【易错点 3】过度优化可能导致代码复杂度增加，需评估实际收益。