|-转 JS for 循环里的 await
结果依旧，这说明在普通的 for 循环里，程序会等待上一步迭代结束执行 await 后，再继续下一步迭代。这个和我们的预期一致，for 循环里的 async/await 是顺序执行的；同理也适用于 while、for-in、for-of 等等形式中。
之前有篇我的 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 等等形式中。...
浏览更多内容请先登录。
立即注册
更新于：2024-10-06 22:42:32
相关内容
IT信息技术(information technology)的工具和内容整理
IP 地址查询 爬虫识别（在线工具）
关于form表单同时用两种方式传输数据的困惑
PHP向js传数组
js关于对齐方式display的三个属性
nodejs puppeteer 自动化测试和采集的内容整理
[Bug]: TypeError: page.$x is not a function
推荐内容
