javascript - 为什么 async await 和 Promise.all 的运行时间相同？

Question

我创建了如下三个 Promise 并等待它们，预计它们需要 6000 毫秒:

let PromiseOne = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise One');
  }, 2000);
});

let PromiseTwo = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise Two');
  }, 2000);
});

let PromiseThree = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise Three');
  }, 2000);
});

(async() => {
  console.time();
  let ResponseOne = await PromiseOne;
  let ResponseTwo = await PromiseTwo;
  let ResponseThree = await PromiseThree;

  console.log(ResponseOne, ResponseTwo, ResponseThree);
  console.timeEnd();
})();

但是，我收到了一个意外的控制台消息，如下所示。

Promise One Promise Two Promise Three
default: 2.004s

据我所知，每个等待都有 2000 毫秒的运行时间。但是，它没有。

在这种情况下，我上面使用 async/await 的代码和下面使用 Promise.all 的代码有什么区别？

let PromiseOne = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise One');
  }, 2000);
});

let PromiseTwo = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise Two');
  }, 2000);
});

let PromiseThree = new Promise(resolve => {
  setTimeout(() => {
    resolve('Promise Three');
  }, 2000);
});

(() => {
  Promise.all([PromiseOne, PromiseTwo, PromiseThree]).then(res => {
    console.log(res);
  });
})();

Answer 1

在这两种情况下，您都会立即构建所有 Promise。在 PromiseThree 的声明结束后，对于这两种情况，您都会留下 3 个 Promise，每个 Promise 都会在 2 秒后解析。无论脚本后面发生什么，每一个都会在 2 秒后解决。

如果你使用 Promise.all，所有的 Promise 都会在 2 秒后解决。

如果您使用 async/await，您等待的第一个将需要 2 秒才能解决。同时，另外两个已经解决了，所以执行 await PromiseTwo 和 await PromiseThree 几乎不需要任何时间 - 所以，总共还是 2 秒.

// at this point, each promise has been created and each will take 2 seconds
(async() => {
  console.time();
  // 2 seconds for the below line
  let ResponseOne = await PromiseOne;
  // after 2 seconds, all have resolved; below line takes no time at all
  let ResponseTwo = await PromiseTwo;
  // same as above
  let ResponseThree = await PromiseOne;

如果您在 await 之前的 promise 之后 构建 其他 promise ，情况会有所不同 - 在这种情况下，它们会按照您的预期串行运行等待。

let makePromise = () => new Promise(resolve => {
  setTimeout(() => {
    resolve();
  }, 2000);
});
console.log('starting');
(async () => {
  console.time();
  await makePromise();
  await makePromise();
  await makePromise();
  console.timeEnd();
})();