本文介绍一种高效、线程安全的方式，通过 promise 缓存与空值合并赋值（??=）操作符，确保同一可选网络请求（如 fetch('c')）在整个生命周期中最多执行一次，避免重复请求和资源浪费。
本文介绍一种高效、线程安全的方式，通过 promise 缓存与空值合并赋值（??=）操作符，确保同一可选网络请求（如 fetch('c')）在整个生命周期中最多执行一次，避免重复请求和资源浪费。
在前端开发中，常遇到一类典型场景：多个逻辑分支可能条件性触发同一个耗时网络请求（例如配置获取、权限校验或共享数据接口），但该请求实际只需执行一次——后续调用应直接复用首次结果。若不加控制，极易导致重复 fetch，不仅增加服务器压力、延长首屏时间，还可能因响应顺序不确定引发状态不一致问题。
上述问题的核心诉求是：对可选请求 'c' 实现懒加载（lazy）、单例化（singleton）、Promise 级缓存（promise-level caching）。关键在于：
- 首次调用 c() 时发起真实 fetch 并返回其 Promise；
- 后续调用 c() 应直接返回同一个 Promise 实例（而非新建 Promise），从而天然共享 resolve 结果与错误状态；
- 无需手动管理 loading 状态或锁机制，利用 JavaScript 的 Promise 特性即可保证线程安全。
✅ 推荐实现：利用 ??= 运算符缓存 Promise
let cPromise;
const c = () => (cPromise ??= fetch('c').then(r => r.json()));
// 分支 A：根据 a 的响应决定是否调用 c
fetch('a')
.then(r => r.json())
.then(data => {
if (data.value === '1') {
c().then(result => console.log('through a', result));
}
});
// 分支 B：根据 b 的响应决定是否调用 c
fetch('b')
.then(r => r.json())
.then(data => {
if (data.value === '1') {
c().then(result => console.log('through b', result));
}
});? 关键原理说明：
- cPromise ??= ... 是 Nullish Coalescing Assignment（空值合并赋值），仅当 cPromise 为 null 或 undefined 时才执行右侧表达式并赋值；
- fetch('c').then(...) 返回一个 Promise 实例，该实例被一次性赋给 cPromise，后续所有 c() 调用都返回这个已存在的 Promise；
- 即使 fetch('c') 尚未完成，c() 仍返回同一个 pending Promise，因此 .then() 注册的回调会自动在 resolve 后按注册顺序执行——完全符合预期行为。
⚠️ 注意事项与最佳实践
- 不要在 c() 内部 new Promise(...) 包裹 fetch：这会创建新 Promise，破坏缓存语义，导致重复请求；
- 避免使用 let cPromise = null + if (!cPromise) cPromise = ...：在并发调用下存在竞态风险（两个 c() 同时判断 !cPromise 为真），而 ??= 是原子操作，无此问题；
- 错误处理需统一捕获：由于所有调用共享同一 Promise，建议在 c() 外层或首次调用时添加 .catch()，或在 c() 中返回 fetch(...).then(...).catch(...) 显式处理错误；
- 适用范围：本方案适用于「结果不变」或「幂等」的请求（如静态配置、只读元数据）。若请求结果随时间变化（如实时计数器），则需额外引入 TTL 或手动失效机制；
- ES2021+ 兼容性：??= 需现代浏览器或构建工具（如 Babel）支持；若需兼容旧环境，可用 cPromise || (cPromise = ...) 替代（注意此处用 || 而非 ??，因 Promise 永不为 falsy）。
✅ 总结
通过一个轻量级的闭包变量 cPromise 与 ??= 运算符，我们以最小认知成本实现了「条件触发、最多一次、自动复用」的 fetch 策略。它不依赖第三方库，不增加运行时开销，且完全符合 Promise 规范——是解决此类问题的专业、简洁、可靠的首选方案。
