概览(循环方式 - 常用)

for
map
forEach
filter

声明遍历的数组和异步方法

声明一个数组：⬇️

const skills = ['js', 'vue', 'node', 'react']
复制代码

再声明一个promise的异步代码: ⬇️

function getSkillPromise (value) {return new Promise((resolve, reject) => {setTimeout(() => {resolve(value)}, 1000)})
}
复制代码

for 循环中使用

由于for循环并非函数，而async、await需要在函数中使用，因此需要在for循环外套一层function

async function test () {for (let i = 0; i < skills.length; i++) {const skill = skills[i]const res = await getSkillPromise(skill)console.log(res)}
}test() // 调用
复制代码

当使用await时，希望JavaScript暂停执行，直到等待 promise 返回处理结果。上述结果意味着for循环中有异步代码，是可以等到for循环中异步代码完全跑完之后再执行for循环后面的代码。
但是他不能处理回调的循环，如forEach、map、filter等，下面具体分析。

map 中使用

在map中使用await, map 的返回值始是promise数组，这是因为异步函数总是返回promise。

async function test () {console.log('start')const res = skills.map(async item => {return await getSkillPromise(item)})console.log(res)console.log('end')
}test()
复制代码

结果：始终为promise数组

start
[Promise { <pending> },Promise { <pending> },Promise { <pending> },Promise { <pending> }
]
end
复制代码

若果你想要等到promise的返回结果，可以使用promise.all()处理一下

async function test () {console.log('start')const res = skills.map(async item => {return await getSkillPromise(item)})const resPromise = await Promise.all(res)console.log(resPromise)console.log('end')
}test()// 结果
start
[ 'js', 'vue', 'node', 'react' ]
end复制代码

forEach 中使用

先上代码和结果

async function test () {console.log('start')skills.forEach(async item => {const res = await getSkillPromise(item)console.log(res)})console.log('end')
}test()
复制代码

预期结果

'Start'
'js'
'vue'
'node'
'react'
'End'
复制代码

实际结果在forEach循环等待异步结果返回之前就执行了console.log('end')

'Start'
'End'
'js'
'vue'
'node'
'react'
复制代码

JavaScript 中的 forEach不支持 promise 感知，也支持 async 和await，所以不能在 forEach 使用 await 。

filter 中使用

使用filter过滤item为vue或者react的选项

正常使用 filter：

async function test () {console.log('start')const res = skills.filter(item => {return ['vue', 'react'].includes(item)})console.log(res)console.log('end')
}test() // 调用// 结果
start
[ 'vue', 'react' ]
end
复制代码

使用 await后：

async function test () {console.log('start')const res = skills.filter(async item => {const skill = await getSkillPromise(item)return ['vue', 'react'].includes(item)})console.log(res)console.log('end')
}test()
复制代码

预期结果：

start
[ 'vue', 'react' ]
end
复制代码

实际结果:

[ 'js', 'vue', 'node', 'react' ]
end
复制代码

结论：因为异步函数getSkillPromise返回结果返回的promise总是真的，所以所有选项都通过了过滤

JS循环中使用async、await的正确姿势相关推荐

循环中使用async/await
此需求在于二次循环中需要使用async/await,按照每次嵌套循环的时候,进行async,则会给出错误的输出,如下所示 let list = [{name: "a",age: 1 ...
如何在 JavaScript 循环中使用 async/await
在循环中迭代循环项和处理异步逻辑(即API调用),可能是我们作为JavaScript开发人员必须执行的两个最常见的任务.本文将讨论的是组合async/await和迭代逻辑的最佳方法. 有时候,你会希望 ...
[js] js循环中调用异步的方法，如何确保执行结果的顺序是正确的？
[js] js循环中调用异步的方法,如何确保执行结果的顺序是正确的? An example:let searchApi = function(arg){return new Promise((reso ...
在.NET中执行Async/Await的两种错误方法
微信公众号:架构师高级俱乐部关注可了解更多的编程,架构知识.问题或建议,请公众号留言; 如果你觉得此文对你有帮助,欢迎转发在.NET中执行异步/等待的两种错误方法在应用开发中,我们为了提高应用程 ...
promise用法_JavaScript中的async/await的用法和理解
昨天更新的是"JavaScript中的Promise使用详解",其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出.今天就说一说"JavaS ...
【vue】---vue中使用async+await出现的问题及解决方案
[vue]---vue中使用async+await出现的问题及解决方案参考文章: (1)[vue]---vue中使用async+await出现的问题及解决方案 (2)https://www.cnbl ...
Microsoft.Bcl.Async 使用总结--在.NET Framework 4.5项目上使用.NET Framework 4.5版本及以上版本才可以使用C# 5中的async/await异步特
正常情况下async/await异步特性,只能在.NET Framework 4.5以上的版本才可以使用,那如果想在.NET Framework 4使用C# 5中的异步特性怎么办呢?还好有一个开源的类 ...
实际案例：在现有代码中通过async/await实现并行
实际案例:在现有代码中通过async/await实现并行一项新技术或者一个新特性,只有你用它解决实际问题后,才能真正体会到它的魅力,真正理解它.也期待大家能够多分享解一些解决实际问题的内容. 在我们 ...
boost log 能不能循环覆盖_如何在 JS 循环中正确使用 async 与 await
引言 async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议然而,由于部分开发人员对该语法糖原理的 ...

JS循环中使用async、await的正确姿势

概览(循环方式 - 常用)

声明遍历的数组和异步方法

for 循环中使用

map 中使用

forEach 中使用

filter 中使用

JS循环中使用async、await的正确姿势相关推荐

最新文章

热门文章