如何在多个位置等待同一异步值？Promise实现解析

嘿，想要让好几块独立的异步代码等着同一个结果？这事儿用Promise就能完美解决——而且不管多少个地方在等，这个异步触发逻辑只会跑一次，所有等待的代码最后都会拿到同一个值。

下面是具体的示例代码，你可以直接参考：

let trigger;
const promise = new Promise(r => {
  console.log('promise is created *once*');
  trigger = value => {
    console.log('trigger is called *once*');
    r(value);
  }
});

(async () => {
  console.log('A waiting');
  const value = await promise;
  console.log(`A finished, got ${value}`);
})();

(async () => {
  console.log('B waiting');
  const value = await promise;
  console.log(`B finished, got ${value}`);
})();

// 调用trigger触发Promise的resolve，传入你要共享的值
trigger('Hello World!');

关键逻辑解释： #

• 我们先创建了一个只会初始化一次的Promise：里面的console.log('promise is created *once*')只会打印一次，同时把Promise的resolve函数赋值给了trigger变量，方便后续手动触发结果。
• 接着两个独立的立即执行异步函数（可以看作两个并行的“任务”）都在await同一个promise对象，它们会进入等待状态，直到这个Promise被resolve。
• 当你调用trigger并传入具体值时，Promise就会被标记为已完成状态，这时候所有在等待它的代码都会同时拿到这个值，继续执行后续逻辑——而且trigger里的日志也只会打印一次，说明resolve操作只执行了一次。

额外注意点： #

• Promise有个核心特性：一旦状态被确定（resolve/reject），就再也不会改变，之后任何再await这个Promise的代码都会直接拿到已确定的结果，不会重复执行初始化逻辑。
• 这种模式非常适合多个组件、函数需要共享同一个异步结果的场景，比如多个地方需要等待同一个API请求的返回值，用这个方法能避免重复发起请求，提升性能。
• 不需要多次调用trigger，因为Promise状态固定后，后续的resolve调用不会产生任何效果。

内容的提问来源于stack exchange，提问作者0