await不能用在forEach中？

async function deng() {
  for (var i = 0; i < 3; i++) {
    await new Promise((resolve) => {
      setTimeout(() => {
        resolve(1);
      }, 2000);
    }).then((data) => {
      console.log("data", data);
    });
  }
  console.log(2);
}
deng();
console.log(0);

 

不知道你是否写过类似的代码:

function test() {
  let arr = [3, 2, 1];

  arr.forEach(async (item) => {
    const res = await fetch(item);

    console.log(res);
  });

  console.log("end");
}

function fetch(x) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x);
    }, 500 * x);
  });
}

test();

我当时期望的打印顺序是

1. 3

2. 2

3. 1

4. end

结果现实与我开了个玩笑，打印顺序居然是

1. end

2. 1

3. 2

4. 3

为什么？

其实原因很简单，那就是 forEach 只支持同步代码。

我们可以参考下 Polyfill 版本的 forEach，简化以后类似就是这样的伪代码

1.     while (index < arr.length) {

2.       callback(item, index)   //也就是我们传入的回调函数

3.     }

从上述代码中我们可以发现，forEach 只是简单的执行了下回调函数而已，并不会去处理异步的情况。并且你在 callback 中即使使用 break 也并不能结束遍历。

怎么解决？

一般来说解决的办法有2种,for...of和for循环。

使用 Promise.all 的方式行不行，答案是： 不行

async function test() {
  let arr = [3, 2, 1];

  await Promise.all(
    arr.map(async (item) => {
      const res = await fetch(item);

      console.log(res);
    })
  );

  console.log("end");
}

可以看到并没有按照我们期望的输出。

这样可以生效的原因是 async 函数肯定会返回一个 Promise 对象，调用 map 以后返回值就是一个存放了 Promise 的数组了，这样我们把数组传入 Promise.all 中就可以解决问题了。但是这种方式其实并不能达成我们要的效果，如果你希望内部的 fetch 是顺序完成的，可以选择第二种方式。

第1种方法是使用 for...of

async function test() {
  let arr = [3, 2, 1];

  for (const item of arr) {
    const res = await fetch(item);

    console.log(res);
  }

  console.log("end");
}

这种方式相比 Promise.all 要简洁的多，并且也可以实现开头我想要的输出顺序。

但是这时候你是否又多了一个疑问？为啥 for...of 内部就能让 await 生效呢。

因为 for...of 内部处理的机制和 forEach 不同，forEach 是直接调用回调函数，for...of 是通过迭代器的方式去遍历。

async function test() {
  let arr = [3, 2, 1];

  const iterator = arr[Symbol.iterator]();

  let res = iterator.next();

  while (!res.done) {
    const value = res.value;

    const res1 = await fetch(value);

    console.log(res1);

    res = iterator.next();
  }

  console.log("end");
}

第2种方法是使用 for循环

async function test() {
  let arr = [3, 2, 1];

  for (var i = 0; i < arr.length; i++) {
    const res = await fetch(arr[i]);

    console.log(res);
  }

  console.log("end");
}

function fetch(x) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x);
    }, 500 * x);
  });
}

test();

第3种方法是使用 while循环

async function test() {
  let arr = [3, 2, 1];

  var i = 0;

  while (i !== arr.length) {
    const res = await fetch(arr[i]);

    console.log(res);

    i++;
  }

  console.log("end");
}

function fetch(x) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(x);
    }, 500 * x);
  });
}

test();

​​​​​​​

• 要想在循环中使用async await，请使用for...of 或者 for 循环, while循环

forEach支持async await

forEach 在正常情况像下面这么写肯定是做不到同步的，程序不会等一个循环中的异步完成再进行下一个循环。原因很明显，在上面的模拟中，while 循环只是简单执行了 callback，所以尽管 callback 内使用了 await ，也只是影响到 callback 内部。

arr.myforeach(async v => {
    await fetch(v);
});

要支持上面这种写法，只要稍微改一下就好

Array.prototype.myforeach = async function(fn, context = null) {
  let index = 0;

  let arr = this;

  if (typeof fn !== "function") {
    throw new TypeError(fn + " is not a function");
  }

  while (index < arr.length) {
    if (index in arr) {
      try {
        await fn.call(context, arr[index], index, arr);
      } catch (e) {
        console.log(e);
      }
    }

    index++;
  }
};

参考链接：

• async,await与forEach引发的血案

• 【JS基础】从JavaScript中的for...of说起(下) - async和await