首页
Javascript
Html
Css

Node.js

Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于

for 循环里的 await

2021年06月16日 转载自 anOnion 阅读(962)

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

Warm up

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

  1. const Basket = {
  2. onion: 1,
  3. ginger: 2,
  4. garlic: 3,
  5. }
  6. const getVegetableNum = async (veg) => Basket[veg];

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

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

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

  1. const start1 = async () => {
  2. console.log('Start');
  3. const onion = await getVegetableNum('onion');
  4. console.log('onion', onion);
  5. const ginger = await getVegetableNum('ginger');
  6. console.log('ginger', ginger);
  7. const garlic = await getVegetableNum('garlic');
  8. console.log('garlic', garlic);
  9. console.log('End');
  10. }

最后打印结果如下:

  1. Start
  2. onion 1
  3. ginger 2
  4. garlic 3
  5. End

await in a for loop

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

  1. const start = async () => {
  2. console.log('Start');
  3. const arr = ['onion', 'ginger', 'garlic'];
  4. for(let i = 0; i < arr.length; ++i>){
  5. const veg = arr[i];
  6. const num = await getVegetableNum(veg);
  7. console.log(veg, num);
  8. }
  9. console.log('End');
  10. }

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

  1. Start
  2. onion 1
  3. ginger 2
  4. garlic 3
  5. End

await in callback loop

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

forEach

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

  1. const start = async () => {
  2. console.log('Start');
  3. ['onion', 'ginger', 'garlic']
  4. .forEach(async function callback(veg){
  5. const num = await getVegetableNum(veg);
  6. console.log(veg, num);
  7. });
  8. console.log('End');
  9. }

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

  1. Start
  2. End
  3. onion 1
  4. ginger 2
  5. garlic 3

map

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

  1. const start = async () => {
  2. console.log('Start');
  3. const promises = ['onion', 'ginger', 'garlic']
  4. .map(async function callback(veg) {
  5. const num = await getVegetableNum(veg);
  6. console.log(veg, num);
  7. });
  8. console.log('promises:', promises);
  9. console.log('End');
  10. }

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

  1. Start
  2. promises: [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
  3. End
  4. onion 1
  5. ginger 2
  6. garlic 3

filter

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

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

reduce

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

  1. const sum = ['onion', 'ginger', 'garlic']
  2. .reduce(async (acc, veg) => {
  3. const num = await getVegetableNum(veg);
  4. return acc + num;
  5. }, 0);
  6. console.log(sum); // Promise { <pending> }
  7. 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 判定结果就是了:

  1. const sum = await ['onion', 'ginger', 'garlic']
  2. .reduce(async (acc, veg) => {
  3. const num = await getVegetableNum(veg);
  4. return (await acc) + num;
  5. }, 0);
  6. console.log(sum); // 6

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

Promise.all

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

  1. const fetchNums = (vegs) => {
  2. const promises = vegs.map( getVegetableNum );
  3. return Promise.all( promises );
  4. }
  5. const start = async () => {
  6. console.log('Start');
  7. const nums = await fetchNums( ['onion', 'ginger', 'garlic'] );
  8. console.log(nums); // [1, 2, 3]
  9. // then map, forEach, filter or reduce according to nums
  10. console.log('End');
  11. }

好处还是挺明显的:

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

小结

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

相关

© 本文著作权归原作者所有 来源:anOnion 阅读原文