async 与 await 的使用方式相对简单。 蛤当你尝试在循环中使用await时,事情就会变得复杂一些。在本文中,分享一些在如果循环中使用await值得注意的问题。
在本文中,分享一些在如果循环中使用 准备一个例子对于这篇文章,假设你想从水果篮中获取水果的数量。 const fruitBasket = { apple: 27, grape: 0, pear: 14 }; 你想从 const getNumFruit = fruit => { return fruitBasket[fruit]; }; const numApples = getNumFruit('apple'); console.log(numApples); //27 现在,假设 const sleep = ms => { return new Promise(resolve => setTimeout(resolve, ms)) }; const getNumFruie = fruit => { return sleep(1000).then(v => fruitBasket[fruit]); }; getNumFruit("apple").then(num => console.log(num)); // 27 最后,假设你想使用 const control = async _ => { console.log('Start') const numApples = await getNumFruit('apple'); console.log(numApples); const numGrapes = await getNumFruit('grape'); console.log(numGrapes); const numPears = await getNumFruit('pear'); console.log(numPears); console.log('End') } 在 for 循环中使用 await首先定义一个存放水果的数组: const fruitsToGet = [“apple”, “grape”, “pear”]; 循环遍历这个数组: const forLoop = async _ => { console.log('Start'); for (let index = 0; index < fruitsToGet.length; index++) { // 得到每个水果的数量 } console.log('End') } 在 由于 const forLoop = async _ => { console.log('start'); for (let index = 0; index < fruitsToGet.length; index ++) { const fruit = fruitsToGet[index]; const numFruit = await getNumFruit(fruit); console.log(numFruit); } console.log('End') } 当使用 结果正如你所预料的那样。 “Start”; “Apple: 27”; “Grape: 0”; “Pear: 14”; “End”; 这种行为适用于大多数循环(比如 但是它不能处理需要回调的循环,如 在 forEach 循环中使用 await首先,使用 const forEach = _ => { console.log('start'); fruitsToGet.forEach(fruit => { //... }) console.log('End') } 接下来,我们将尝试使用 const forEachLoop = _ => { console.log('Start'); fruitsToGet.forEach(async fruit => { const numFruit = await getNumFruit(fruit); console.log(numFruit) }); console.log('End') } 我期望控制台打印以下内容: “Start”; “27”; “0”; “14”; “End”; 但实际结果是不同的。在 实际控制台打印如下: ‘Start’ ‘End’ ‘27’ ‘0’ ‘14’ JavaScript 中的 在 map 中使用 await如果在 const mapLoop = async _ => { console.log('Start') const numFruits = await fruitsToGet.map(async fruit => { const numFruit = await getNumFruit(fruit); return numFruit; }) console.log(numFruits); console.log('End') } “Start”; “[Promise, Promise, Promise]”; “End”; 如果你在 const mapLoop = async _ => { console.log('Start'); const promises = fruitsToGet.map(async fruit => { const numFruit = await getNumFruit(fruit); return numFruit; }); const numFruits = await Promise.all(promises); console.log(numFruits); console.log('End') } 运行结果如下: 如果你愿意,可以在 const mapLoop = _ => { // ... const promises = fruitsToGet.map(async fruit => { const numFruit = await getNumFruit(fruit); return numFruit + 100 }) // ... } “Start”; “[127, 100, 114]”; “End”; 在 filter 循环中使用 await当你使用 如果你正常使用 const filterLoop = _ => { console.log('Start') const moreThan20 = fruitsToGet.filter(async fruit => { const numFruit = await fruitBasket[fruit] return numFruit > 20 }) console.log(moreThan20) console.log('END') } 运行结果 Start ["apple"] END
const filterLoop = async _ => { console.log('Start') const moreThan20 = await fruitsToGet.filter(async fruit => { const numFruit = fruitBasket[fruit] return numFruit > 20 }) console.log(moreThan20) console.log('END') } // 打印结果 Start ["apple", "grape", "pear"] END 为什么会发生这种情况? 当在 const filtered = array.filter(true); 在
const filterLoop = async _ => { console.log('Start'); const promises = await fruitsToGet.map(fruit => getNumFruit(fruit)); const numFruits = await Promise.all(promises); const moreThan20 = fruitsToGet.filter((fruit, index) => { const numFruit = numFruits[index]; return numFruit > 20; }) console.log(moreThan20); console.log('End') } 在 reduce 循环中使用 await如果想要计算 const reduceLoop = _ => { console.log('Start'); const sum = fruitsToGet.reduce((sum, fruit) => { const numFruit = fruitBasket[fruit]; return sum + numFruit; }, 0) console.log(sum) console.log('End') } 运行结果: 当你在 const reduceLoop = async _ => { console.log('Start'); const sum = await fruitsToGet.reduce(async (sum, fruit) => { const numFruit = await fruitBasket[fruit]; return sum + numFruit; }, 0) console.log(sum) console.log('End') }
剖析这一点很有趣。
解开谜团! 这意味着,你可以在 const reduceLoop = async _ => { console.log('Start'); const sum = await fruitsToGet.reduce(async (promisedSum, fruit) => { const sum = await promisedSum; const numFruit = await fruitBasket[fruit]; return sum + numFruit; }, 0) console.log(sum) console.log('End') } 但是从上图中看到的那样, 有一种方法可以加速 const reduceLoop = async _ => { console.log('Start'); const sum = await fruitsToGet.reduce(async (promisedSum, fruit) => { const numFruit = await fruitBasket[fruit]; const sum = await promisedSum; return sum + numFruit; }, 0) console.log(sum) console.log('End') } 这是因为 在reduce中使用wait最简单(也是最有效)的方法是
这个版本易于阅读和理解,需要一秒钟来计算水果总数。 从上面看出来什么
更多编程相关知识,请访问:编程学习网站!! 以上就是JavaScript循环中如何使用 async/await?需要注意些什么?的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |