当 async/await 遇上 forEach

从事互联网IT行业 6年前端程序员，还有头发佛系分享

什么是async/await

async/await 是 ECMAScript 2017 标准中新增的语法，其目的是简化 JavaScript 中处理异步操作的方式，使代码更加清晰易懂。在 async/await 出现之前，我们通常使用回调函数、Promise、Generator 等方式来处理异步操作。而 async/await 则可以让异步代码的编写方式更接近于同步代码，使得异步操作更加方便和易于维护。 async/await 是由 async 和 await 两个关键字组成的语法糖。其中，async 用于声明一个异步函数，await 用于等待一个异步操作的结果。使用 async/await 的代码结构更加清晰，通常比使用回调函数、Promise 等方式要简单易懂。例如，下面是一个使用 Promise 处理异步操作的代码示例：

function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello');
    }, 1000);
asyncFunc().then(result => {
  console.log(result);
});

而使用 async/await 的代码则更加直观简洁：

async function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello');
    }, 1000);
async function main() {
  const result = await asyncFunc();
  console.log(result);
main();

在上面的代码中，我们使用 async/await 定义了一个异步函数 asyncFunc，并使用 await 等待异步操作的结果。在 main 函数中，我们调用 asyncFunc，并把结果输出到控制台。使用 async/await 的代码结构更加清晰，让我们更加容易理解异步操作的执行流程。

在foreach中使用async/await

在 JavaScript 中，使用 async/await 可以方便地处理异步操作，而 forEach 是一个常用的数组方法，可以对数组进行遍历。但是，在使用 forEach 时需要注意，如果其中的操作是异步的，可能会导致意想不到的结果。例如，在 forEach 中使用 async/await：

async function asyncFunc(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(data);
    }, Math.random() * 1000);
const array = [1, 2, 3];
array.forEach(async (item) => {
  const result = await asyncFunc(item);
  console.log(result);
});

在上面的代码中，我们使用 forEach 对数组进行遍历，并在遍历的过程中调用了一个异步函数 asyncFunc，然后使用 await 等待异步函数的执行结果，并输出结果到控制台。但是，当我们运行这段代码时，发现结果并不是我们预期的那样：

// 预期应该是顺序打印出1 2 3