复制
1function test() {
2  let arr = [3, 2, 1];
3  arr.forEach(async (item) => {
4    const res = await fetch(item);
5    console.log(res);
6  });
7  console.log("end");
8}
9
10function fetch(x) {
11  return new Promise((resolve, reject) => {
12    setTimeout(() => {
13      resolve(x);
14    }, 500 * x);
15  });
16}
17
18test();

上面代码的输出结果是：

复制
1end
21
32
43

为什么

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

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

复制
1while (index < arr.length) {
2	callback(item, index)   //也就是我们传入的回调函数
3}

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

怎么解决

一般来说解决的办法有2种：

• for...of

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

复制
1async function test() {
2  let arr = [3, 2, 1];
3  for (const item of arr) {
4    const res = await fetch(item);
5    console.log(res);
6  }
7  console.log("end");
8}

• for循环

复制
1async function test() {
2  let arr = [3, 2, 1];
3  for (var i = 0; i < arr.length; i++) {
4    const res = await fetch(arr[i]);
5    console.log(res);
6  }
7  console.log("end");
8}
9
10function fetch(x) {
11  return new Promise((resolve, reject) => {
12    setTimeout(() => {
13      resolve(x);
14    }, 500 * x);
15  });
16}
17
18test();