将 Async/Await 与 Promise.all 与 for 循环一起使用

Question

这是我目前的理解：

for 循环中的 async/await 应该暂停执行，直到 promise 解决，这意味着循环的下一次迭代在该行完成之前不会发生。

考虑以下数组：

const data = [];
for (let i = 0; i <= 100000; i++) {
    data.push(i);
}

方法一：在for循环中等待Promise

async function method1() {
  const startTime = new Date();
  console.log('start:', startTime);

  for (const item in data) {
    await new Promise(resolve => {
      if (item % 3 === 0) {
        resolve({});
      } else {
        resolve(item)
      }
    });
  }

  const endTime = new Date();
  console.log('finish:', endTime);
  console.log('total time:', endTime-startTime);
}

因为它需要顺序执行 Promise 才能继续循环，所以我认为使用 Promise.all 将是一种性能增强，可以在更大程度上利用异步处理：

方法 2：Promise.all 跟随 for 循环

async function method2() {
  const promises = [];
  const startTime = new Date();
  console.log('start:', startTime);

  for (const item in data) {
    const promise = new Promise(resolve => {
      if (item % 3 === 0) {
        resolve({});
      } else {
        resolve(item)
      }
    });

    promises.push(promise);
  }

  await Promise.all(promises);
  const endTime = new Date();
  console.log('finish:', endTime);
  console.log('total time:', endTime-startTime);
}

我的推理：当每个先前创建的 Promise 尝试解决时，循环将继续发出新的 Promise。所以在我看来，方法 1 = 阻塞......而方法 2 = 更少阻塞。

当我在 repl.it 上运行它们时，我发现方法 1 实际上更快，几乎快了 2 倍。有人可以解释为什么会这样吗？不应该反过来吗？

Answer 1

我的猜测是你解析太快了，所以循环支配了执行时间，因为method2有两个循环：一个推入数组，一个promise.all完成，而method1只有一个循环，所以你的感觉“几乎是两倍”实际上在理论上是正确的。

尝试像new Promise(resolve => setTimeout(resolve, 200)) 那样伪装actual async operation，你应该会得到你所期望的

Answer 2

进一步补充 Drake 所说的话。方法 2 在没有超时的情况下速度较慢的唯一原因是它必须遇到的循环数，但在请求或异步操作有延迟的实际场景中。方法 2 在大多数情况下会更快

这是修改后的带有 SetTimeout 的 sn-p。

const data = [];
for (let i = 0; i <= 1000; i++) {
    data.push(i);
}


async function method1() {
  const startTime = new Date();
  console.log('start 1:', startTime);

  for (const item in data) {
   await new Promise(resolve => {
      setTimeout(()=>{
        if (item % 3 === 0) {
        resolve({});
      } else {
        resolve(item)
      }
      },1)
    });
  }
  const endTime = new Date();
  console.log('finish 1:', endTime);
  console.log('total time:', endTime-startTime);
}

async function method2() {
  const promises = [];
  const startTime = new Date();
  console.log('start 2:', startTime);

  for (const item in data) {
    const promise = new Promise(resolve => {
      setTimeout(()=>{
        if (item % 3 === 0) {
        resolve({});
      } else {
        resolve(item)
      }
      },1)
    });

    promises.push(promise);
  }

  await Promise.all(promises);
  const endTime = new Date();
  console.log('finish 2:', endTime);
  console.log('total time:', endTime-startTime);
}

method1()
method2()