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');}

最后打印结果如下：

Startonion 1ginger 2garlic 3End

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 等等形式中。

Startonion 1ginger 2garlic 3End

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 里。

StartEndonion 1ginger 2garlic 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》）

Startpromises: [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]Endonion 1ginger 2garlic 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 { <pending> }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。码字不易，欢迎点赞。