JavaScript循环中如何使用 async/await？需要注意些什么？

来源:网络整理作者: 发布时间:2020-12-19 01:07

async 与 await 的使用方式相对简单。蛤当你尝试在循环中使用await时，事情就会变得复杂一些。在本文中，分享一些在...

为什么会发生这种情况?

使用map返回一个promise 数组

const fruitBasket = { apple: 27, grape: 0, pear: 14 };

你想从fruitBasket获得每个水果的数量。要获取水果的数量，可以使用getNumFruit函数。

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

从上面看出来什么

如果你想连续执行await调用，请使用for循环(或任何没有回调的循环)。

准备一个例子

对于这篇文章，假设你想从水果篮中获取水果的数量。

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循环，如果你在等待promisedSum之前先等待getNumFruits()，那么reduceLoop只需要一秒钟即可完成：

const forLoop = async _ => { console.log('Start'); for (let index = 0; index < fruitsToGet.length; index++) { // 得到每个水果的数量 } console.log('End') }

在for循环中，过上使用getNumFruit来获取每个水果的数量，并将数量打印到控制台。

}

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

运行结果

const mapLoop = _ => { // ... const promises = fruitsToGet.map(async fruit => { const numFruit = await getNumFruit(fruit); return numFruit + 100 }) // ... } “Start”; “[127, 100, 114]”; “End”;在 filter 循环中使用 await

当你使用filter时，希望筛选具有特定结果的数组。假设过滤数量大于20的数组。

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 promises = fruitsToGet.map(getNumFruit);

在第二次遍历中，sum是一个promise。（为什么？因为异步函数总是返回promises！）numFruit是0.promise 无法正常添加到对象，因此JavaScript将其转换为[object Promise]字符串。 [object Promise] + 0 是object Promise] 0。

‘Start’ ‘End’ ‘27’ ‘0’ ‘14’

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

最后，假设你想使用await和getNumFruit来获取异步函数中每个水果的数量。

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

当使用await时，希望JavaScript暂停执行，直到等待 promise 返回处理结果。这意味着for循环中的await 应该按顺序执行。

“Start”; “27”; “0”; “14”; “End”;

但实际结果是不同的。在forEach循环中等待返回结果之前，JavaScrip先执行了 console.log('End')。

原文地址：https://medium.com/free-code-camp/javascript-async-and-await-in-loops-30ecc5fb3939

在 reduce 循环中使用 await

如果想要计算 fruitBastet中的水果总数。通常，你可以使用reduce循环遍历数组并将数字相加。

在reduce中使用wait最简单(也是最有效)的方法是

这个版本易于阅读和理解，需要一秒钟来计算水果总数。

使用 filter 对返回的结果进行处理

更多编程相关知识，请访问：编程学习网站！！

以上就是JavaScript循环中如何使用 async/await？需要注意些什么？的详细内容，更多请关注聚合云库其它相关文章！

解开谜团！

使用 await 等待处理结果

const fruitsToGet = [“apple”, “grape”, “pear”];

循环遍历这个数组：

这种行为适用于大多数循环(比如while和for-of循环)…

[object Promise]14 是什么鬼？？

不要在 filter 和 reduce 中使用 await，如果需要，先用 map 进一步骤处理，然后在使用 filter 和 reduce 进行处理。

这是因为reduce可以在等待循环的下一个迭代之前触发所有三个getNumFruit promise。然而，这个方法有点令人困惑，因为你必须注意等待的顺序。

结果正如你所预料的那样。

如果你正常使用filter （没有 await），如下：