JS循环中正确使用async、await的姿势分享

JS循环中正确使用async、await的姿势分享：

在循环中正确使用async和await关键字，需要注意以下几点：

1. 必须将循环封装在一个async函数中，这样才能使用await关键字等待异步操作的完成。

2. 循环体中，需使用await等待当前异步处理结束才能再进行下一步操作。

3. 如果循环的异步处理不需要保持顺序执行，则可以使用Promise.all()等待所有异步任务完成，再进行下一步操作。

以下是两个示例：

// 示例一：循环处理多个异步任务
async function loop() {
  for (let i = 0; i < 5; i++) {
    await asyncFunc(i);
    console.log(`执行完第${i}个异步任务`);
  }
  console.log("循环结束");
}

async function asyncFunc(index) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`异步任务 ${index} 执行完毕`);
      resolve();
    }, Math.random() * 1000);
  });
}

loop();
// 执行结果：
// 异步任务 0 执行完毕
// 执行完第0个异步任务
// 异步任务 2 执行完毕
// 执行完第1个异步任务
// 异步任务 1 执行完毕
// 执行完第2个异步任务
// 异步任务 3 执行完毕
// 执行完第3个异步任务
// 异步任务 4 执行完毕
// 执行完第4个异步任务
// 循环结束

// 示例二：使用Promise.all()等待所有异步任务完成
async function loop2() {
  const promises = [];
  for (let i = 0; i < 5; i++) {
    promises.push(asyncFunc(i));
  }
  await Promise.all(promises);
  console.log("所有异步任务执行完毕");
}

loop2();
// 执行结果：
// 异步任务 1 执行完毕
// 异步任务 3 执行完毕
// 异步任务 2 执行完毕
// 异步任务 0 执行完毕
// 异步任务 4 执行完毕
// 所有异步任务执行完毕