javascript - 异步等待 promise 所有与存储在变量中

Question

我正在查看MDN documentation对于async wait，发现还有promise.all的替代方案

所以，

如果coffee、tea和description是我们可以等待的三个 promise

let values = await Promise.all([coffee, tea, description]);

但是 MDN 还给出了慢速和快速异步等待的示例:

慢速异步等待示例:

async function timeTest() {
  await timeoutPromise(3000);
  await timeoutPromise(3000);
  await timeoutPromise(3000);
}

快速异步等待示例:

async function timeTest() {
  const timeoutPromise1 = timeoutPromise(3000);
  const timeoutPromise2 = timeoutPromise(3000);
  const timeoutPromise3 = timeoutPromise(3000);

  await timeoutPromise1;
  await timeoutPromise2;
  await timeoutPromise3;
}

我对快速异步等待感到困惑。它的工作原理与promise.all()类似吗？它比 promise.all() 更好吗？

如果我们在不同的行中编写多个等待，它与慢速异步等待有何不同？

Answer 1

这段代码:

async function timeTest() {
  await timeoutPromise(3000);
  await timeoutPromise(3000);
  await timeoutPromise(3000);
}

只有在最后一个 Promise 完成后才会初始化每个 Promise。

• 初始化第一个 Promise
• 等待其完成(3 秒)
• 初始化第二个 Promise(...等)

相比之下，这个片段:

async function timeTest() {
  const timeoutPromise1 = timeoutPromise(3000);
  const timeoutPromise2 = timeoutPromise(3000);
  const timeoutPromise3 = timeoutPromise(3000);

  await timeoutPromise1;
  await timeoutPromise2;
  await timeoutPromise3;
}

将立即初始化所有 promise 。然后，就会

• 等待第一个 Promise 解决
• 等待第二个 Promise 解决
• 等待第三个 Promise 解决

但是第二个片段有一个严重的缺陷:如果其中一个 promise 碰巧被拒绝，则可能会导致未经处理的拒绝，尽管之前有一个 await 。例如，如果 timeoutPromise1 尚未解析，并且 timeoutPromise2 拒绝:

window.addEventListener('unhandledrejection', () => {
  console.error('Unhandled rejection :(');
});

async function timeTest() {
  const timeoutPromise1 = new Promise(resolve => setTimeout(resolve, 5000));
  const timeoutPromise2 = new Promise((resolve, reject) => setTimeout(reject, 500));
  
  await timeoutPromise1;
  await timeoutPromise2;
}

timeTest()
  .catch((error) => {
    console.log('Error caught');
  });

出现此问题的原因是 Promise 必须在被拒绝时被 awaited 或链接有 .catch 。如果它在 .catch 或 await 连接到它之前拒绝，则会导致未处理的拒绝。

未处理的拒绝，就像未处理的错误一样，都是丑陋的，应该避免。在 Node 中，未处理的拒绝不仅不好，它们也已被弃用，并且可能使 Node 进程完全崩溃。

因此，使用 Promise.all 是比第二个代码段更好的方法。