您好,登录后才能下订单哦!
JS循环中正确使用async、await的方法是什么,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
for
map
forEach
filter
声明一个数组:⬇️
const skills = ['js', 'vue', 'node', 'react']
再声明一个promise的异步代码: ⬇️
function getSkillPromise (value) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(value) }, 1000) }) }
由于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中使用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
先上代码和结果
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过滤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总是真的,所以所有选项都通过了过滤
如果你想连续执行await调用,请使用for循环(或任何没有回调的循环)。
永远不要和forEach一起使用await,而是使用for循环(或任何没有回调的循环)。
不要在 filter 和 reduce 中使用 await,如果需要,先用 map 进一步骤处理,然后在使用 filter 和 reduce 进行处理。
关于JS循环中正确使用async、await的方法是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。