在JS循环中使用async/await的方法

当在JavaScript中使用循环时，通常我们会面临一个问题，即如何同时异步执行循环体中的多个异步操作，并在它们都完成后执行下一步操作。对于这种情况，我们可以使用async/await结合并发循环来解决这个问题。

使用Promise.all结合循环并发执行异步操作

一种常见的使用async/await结合并发循环的方法是使用Promise.all。假设我们有一个数组，需要对里面的每个元素进行异步操作，且每个异步操作所需时间不同，我们希望等待所有异步操作完成后再将结果返回。那么我们可以按照以下步骤进行：

1. 将每个异步操作封装为一个Promise对象。
2. 使用map函数遍历数组，将每个元素发送给Promise对象处理函数，得到每个元素对应的Promise对象数组。
3. 使用Promise.all函数并发执行所有Promise对象，等待所有异步操作完成。
4. 将操作结果收集到数组并返回。

示例代码如下：

async function handleArray(arr) {
  const promises = arr.map(async function (item) {
    return doAsyncTask(item);
  }); // 传入doAsyncTask函数并返回其Promise对象

  const results = await Promise.all(promises); // 并发执行所有Promise对象
  return results;
}

async function doAsyncTask(item) {
  // 异步操作
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${item} processed`);
    }, Math.random() * 1000); // 随机延时
  });
}

// 使用
const arr = ["item1", "item2", "item3"]; // 待处理的数组
handleArray(arr).then(res => {
  console.log(res);
  // ["item1 processed", "item2 processed", "item3 processed"]
})

使用for...of循环和Promise结合执行异步操作

另一种使用async/await结合循环并发执行异步操作的方法是使用for...of循环。我们可以在循环体内定义异步函数并使用Promise对象封装，然后在每次循环中执行异步函数，并使用Promise.all等待所有异步操作完成最后一起返回结果。示例代码如下：

async function handleArray(arr) {
  const promises= []; // 存放所有Promise对象
  for (const item of arr) {
    const promise = new Promise(async(resolve, reject) => {
      const result = await doAsyncTask(item);
      resolve(result);
    });
    promises.push(promise); // 添加到Promise对象数组中
  }

  const results = await Promise.all(promises); // 并发执行所有Promise对象
  return results;
}

async function doAsyncTask(item) {
  // 异步操作
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${item} processed`);
    }, Math.random() * 1000); // 随机延时
  });
}

// 使用
const arr = ["item1", "item2", "item3"]; // 待处理的数组
handleArray(arr).then(res => {
  console.log(res);
  // ["item1 processed", "item2 processed", "item3 processed"]
})

以上是两种使用async/await结合循环并发执行异步操作的方法，这里还有其他解决方法。当然也可以根据具体情况选择更合适的方法。