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

更新时间:2023-04-04 03:42:22 阅读：评论：0

概览(循环方式 – 常用)

formapforeachfilter

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

声明一个数组：⬇️

const skills = ['js', 'vue', 'node', 'react']

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

function getskillpromi (value) {  return new promi((resolve, reject) => {    ttimeout(() => {      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 getskillpromi(skill)    console.log(res)  }}test() // 调用

当使用await时，希望javascript暂停执行，直到等待 promi 返回处理结果。上述结果意味着for循环中有异步代码，是可以等到for循环中异步代码完全跑完之后再执行for循环后面的代码。

但是他不能处理回调的循环，如foreach、map、filter等，下面具体分析。

map 中使用

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

async function test () {  console.log('start')  const res = skills.map(async item => {    return await getskillpromi(item)  })  console.log(res)  console.log('end')}test()

结果：始终为promi数组

start[  promi { <pending> },  promi { <pending> },  promi { <pending> 森林防火顺口溜},  promi { <pending> }]end

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

async function test () {  console.log('start')  const res = skills.map(async item => {    return await getskillpromi(item)  })  const respromi = await promi.all(res)  console.log(respromi)  console.log('end')}test()// 结果start[ 'js', 'vue', 'node', 'react' ]end

foreach 中使用

先上代码和结果

async function test () {  console.log('start')  skills.foreach(async item => {    const res = await getskillpromi(item)    conso对祖国的祝福le.log(res)  })  console.log('end')}test()

预期结果

‘start’
‘js’
‘vue’
‘node’
‘react’
‘end’

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

‘start’
‘end’
‘js’
‘vue’
‘node’
‘react’

javascript 中的 foreach不支持 promi 感知，也支持 async 和await，所以不能在 foreach 使用 await 。

filter 中使用

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

正常使用 filter：

async function test () {  console.log('start')  const res = skills.filter(item => {    re四川美食排行榜turn ['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 getskillpromi(item)    return ['vue', 'react'].includes(item)  })  console.log(res)  console.log('end')}test()

预期结果：

start
[ ‘vue’, ‘react’ ]
end

实际结果:

[ ‘js’, ‘vue’, ‘node’, ‘react’ ]
end

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

附使用小结

如果你想连续执行await调用，请使用for循环(或任何没有回调的循环)。永远不要和foreach一起使用await，而是使用for循环(或任何没有回调的循环)皇帝的新装导学案。不要在 filter 和 reduce 中使用 await，如果需要，先用 map 进一步骤处理，然后在使用 filter 和 reduce 进行处理。

结语：由于工作中遇到了，异步校验是遇到了此问题，后来经过查阅资料总结出来的结果