for 循环里的 await

之前有篇我的 blog 提到过 js 的异步发展史：从 callback 到 promise 再到 async/await。async/await 之后的 JS 开始允许我们以一种看似顺序执行的方式书写代码，这让入门 JS 变得更简单，但在一些复杂的场景里比如 for-loop 环境里，async/await 还是会有不少坑的。

Warm up

开始前，先写个“菜篮子工程”，getVegetableNum 是本文中最基础的一个异步函数——异步获取蔬菜数量：

const Basket = {
  onion: 1,
  ginger: 2,
  garlic: 3,
}

const getVegetableNum = async (veg) => Basket[veg];

知识点：async 是一个语法糖，表示把结果包在 Promise 里返回；该异步函数等价于

function getVegetableNum (veg) {
  return Promise.resolve( Basket[veg] );
}

OK，我们再试着异步获取三种蔬菜的数量：

const start1 = async () => {
  console.log('Start');
  const onion = await getVegetableNum('onion');
  console.log('onion', onion);

  const ginger = await getVegetableNum('ginger');
  console.log('ginger', ginger);

  const garlic = await getVegetableNum('garlic');
  console.log('garlic', garlic);

  console.log('End');
}

最后打印结果如下：

Start
onion 1
ginger 2
garlic 3
End

await in a for loop

OK，前言到此为止。现实中开发中，上述代码枚举每一种蔬菜的方式太过冗余，一般我们更倾向于写个循环来调用 getVegetableNum 方法：

const start = async () => {
  console.log('Start');
  const arr = ['onion', 'ginger', 'garlic'];

  for(let i = 0; i < arr.length; ++i>){
    const veg = arr[i];
    const num = await getVegetableNum(veg);
    console.log(veg, num);
  }

  console.log('End');
}

结果依旧，这说明在普通的 for 循环里，程序会等待上一步迭代结束执行 await 后，再继续下一步迭代。这个和我们的预期一致，for 循环里的 async/await 是顺序执行的；同理也适用于 while、for-in、for-of 等等形式中。

Start
onion 1
ginger 2
garlic 3
End

await in callback loop

不过，for 循环还有可以写成其他形式，如 forEach、map、reduce、filter 等等，这些需要 callback（回调方法）的循环，似乎就不那么好理解了。

forEach

我们试着用 forEach 代替上面的 for-loop 代码：

const start = async () => {
  console.log('Start');

  ['onion', 'ginger', 'garlic']
  .forEach(async function callback(veg){
    const num = await getVegetableNum(veg);
    console.log(veg, num);
  })；

  console.log('End');
}

看下方的输出结果：显然乱了，End比预期更早出现了。原因很简单，async/await 只是一种语法糖，而 forEach 并非 promise-aware 语法，它的 transform&compile 是有问题的：callback 直接返回了第一个 await 后的 Promise，而之后的判定，被放在了下一个 tick 里。

Start
End
onion 1
ginger 2
garlic 3

map

使用 map 来观察 callback 会更加直观：

const start = async () => {
  console.log('Start');

  const promises = ['onion', 'ginger', 'garlic']
    .map(async function callback(veg) {
      const num = await getVegetableNum(veg);
      console.log(veg, num);
    });

  console.log('promises:', promises);

  console.log('End');
}

小改了一下代码，map 执行结果和 forEach 如出一辙；看下方的打印结果：执行完 map 后返回的是一个 Pending 状态的 Promise 数组；而 await 之后的判定，在下一个 microTask 里执行（MiroTask 分析见《MacroTask & MicroTask》）

Start
promises: [ Promise {  }, Promise {  }, Promise {  } ]
End
onion 1
ginger 2
garlic 3

filter

再看看 filter，callback 的返回事实上也是一个 Promise，而 Promise 在条件判断时为 true，所以这种情况下 filter 的判断永远为真，所以只浅拷贝了一份数组而已。

const moreThan1 = ['onion', 'ginger', 'garlic']
  .filter(async (veg) => {
    const num = await getVegetableNum(veg);
    return num > 1;
  });

//moreThan1 = ['onion', 'ginger', 'garlic']

reduce

最后还有 reduce，下面代码里的 sum 返回的也是 Promise：但它的 callback 和上述的几个方法还不一样，竟然是 promise-aware 的（别问我为什么，就是这么规定的！）

const sum = ['onion', 'ginger', 'garlic']
  .reduce(async (acc, veg) => {
    const num = await getVegetableNum(veg);
    return acc + num;
  }, 0);

console.log(sum); // Promise {  }
console.log(await sum); // [object Promise]3

我们看看 sum 这个 promise 的判定结果是[object Promise]3，很有趣吧。稍微分析一下：

• 在第一次迭代时，callback 里的 acc 是 0——初始值，num 是 1，acc+num 是 2，但由于是 async 函数，返回的是一个 Promise（上面提到过）
• 第二个迭代开始，acc 就一直是 Promise 了，而 Promise+num 的打印结果是 [object Promise]${num}
• 最后一个迭代的 num 是 3， 所以返回的 sum 也就成了 Promise{ '[object Promise]3' }

reduce 既然是 promise-aware 语法，所以它的问题比上面三个好解决：acc 不是 Promise 吗？直接利用 await 返回 acc 判定结果就是了：

const sum = await ['onion', 'ginger', 'garlic']
  .reduce(async (acc, veg) => {
    const num = await getVegetableNum(veg);
    return (await acc) + num;
  }, 0);

console.log(sum); // 6

当然这个写法确实挺难看的。

Promise.all

我们看了上面四种迭代方法——forEach、map、filter、reduce，只要是 callback 使用了async/await，结果就不是很靠谱了，所以应该尽量避免这种写法。那怎么改写呢？可以先把所有异步数据一次性取过来，再进行后续循环操作；批量取数据常用的手段就是 Promise.all：

const fetchNums = (vegs) => {
  const promises = vegs.map( getVegetableNum );
  return Promise.all( promises );
}

const start = async () => {
  console.log('Start');

  const nums = await fetchNums( ['onion', 'ginger', 'garlic'] );
  console.log(nums); // [1, 2, 3]
  // then map, forEach, filter or reduce according to nums

  console.log('End');
}

好处还是挺明显的：

• 从代码质量上来说，符合单一原则，将取数据和操作数据分开来
• 从性能上来说，循环里的异步请求是顺序执行的，而 Promise.all 是并发执行的，速度更快

小结

今天回顾了 async/await 在循环语句里的使用方法，对于普通的 for-loop，所有的 await 都是串行调用的，可以放心使用，包括 while、for-in、for-of 等等；但是在有 callback 的 array 方法，如 forEach、map、filter、reduce 等等，有许多副作用，最好就别使用 await 了。当然最优解还是 Promise.all，无论从质量上还是效率上都是不二选择。

相关

• 《MacroTask & MicroTask》

文章同步发布于an-Onion 的 Github。码字不易，欢迎点赞。