Async Await forEach - Javascript

在 Javascript 中，许多操作都是异步的，这意味着在执行完一个操作之后，需要等待结果返回才能继续执行后续操作。为了更方便地处理异步操作，Javascript 引入了 async/await 关键字。本文将介绍如何使用 async/await 来遍历数组中的元素，即 forEach 方法。

什么是 async/await？

async/await 是 ECMAScript 2017 （ES8）中新增的语法糖，用于更简单和清晰地编写异步代码。async 用于定义一个异步函数，其返回一个 Promise 对象，并且其中的操作可以通过 await 关键字暂停，并等待 Promise 对象的解决。同时，await 关键字只能在异步函数内部使用。

使用 async/await forEach

在 Javascript 中，数组的 forEach 方法可以遍历数组中的每一个元素，并对每个元素执行一个回调函数。然而，forEach 方法并不支持异步操作，这意味着我们不能在回调函数中等待一个 Promise 解决。但是我们可以结合 async/await 和 for...of 循环来实现异步的 forEach。

// 定义一个异步的 forEach 函数
async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

// 使用异步的 forEach
async function main() {
  const array = [1, 2, 3, 4, 5];

  await asyncForEach(array, async (element, index, array) => {
    // 模拟一个异步操作，比如发送网络请求或数据库查询
    await new Promise((resolve) => setTimeout(resolve, 1000));

    console.log(`Element: ${element}`);
  });

  console.log('Finished.');
}

main();

上述代码中，我们首先定义了一个异步的 asyncForEach 函数，它接受一个数组和一个回调函数作为参数。回调函数的执行会被暂停，直到 await 后面的 Promise 对象解决。然后，我们定义了一个 main 函数，它使用异步的 asyncForEach 来遍历数组并执行异步操作。

运行上述代码，输出如下：

Element: 1
Element: 2
Element: 3
Element: 4
Element: 5
Finished.

由于 await 关键字的存在，我们可以确保每个元素的回调函数都执行完毕，并且按照顺序输出。注意，main 函数前面需要加上 await 关键字，以便等待异步操作完成后再继续执行后续代码。

总结起来，使用 async/await 和 for...of 循环可以简单地实现异步版本的 forEach，使得遍历数组时可以处理异步操作，并保持顺序。这在处理需要顺序执行的异步任务时非常有用。