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

作者:毕了业就退休 时间:2024-05-25 15:18:56 

概览(循环方式 - 常用)

  • 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() // 调用

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

当使用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总是真的,所以所有选项都通过了过滤

附使用小结

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

  2. 永远不要和forEach一起使用await,而是使用for循环(或任何没有回调的循环)。

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

结语:由于工作中遇到了超大表单抽离组件,异步校验是遇到了此问题,后来经过查阅资料总结出来的结果

来源:https://juejin.cn/post/7041858551538515981

标签:循环,async,await
0
投稿

猜你喜欢

  • 如何基于线程池提升request模块效率

    2023-06-12 11:13:44
  • PowerDesigner中如何导入SQL Server数据库

    2024-01-17 08:38:46
  • Python高级特性之闭包与装饰器实例详解

    2021-09-19 03:17:25
  • 作为PHP程序员你要知道的另外一种日志

    2023-11-15 02:06:59
  • 生成二维码方法汇总

    2024-04-27 15:23:32
  • 如何理解python面向对象编程

    2023-01-01 20:19:56
  • python计算auc指标实例

    2021-12-21 12:10:03
  • IBatis.net连接MySql 问题与故障的解决方案

    2011-06-02 09:38:00
  • PHP之Mysql常用SQL语句示例的深入分析

    2024-05-05 09:31:21
  • pyspark操作MongoDB的方法步骤

    2021-05-02 11:12:12
  • Python json解析库jsonpath原理及使用示例

    2022-05-18 09:43:00
  • 互联网产品的用户体验看着“很美”

    2009-07-07 12:04:00
  • GO web 数据库预处理的实现

    2024-01-21 04:39:07
  • 日文片假名导致 Access 搜索“内存溢出”

    2009-07-07 22:23:00
  • numpy中实现二维数组按照某列、某行排序的方法

    2022-07-16 00:18:03
  • JS清空上传控件input(type="file")的值的代码第1/2页

    2023-08-13 07:22:28
  • OpenCV实现图片亮度增强或减弱

    2022-09-16 00:15:04
  • Firefox扩展工具:Firebug调试经验与技巧

    2008-10-31 13:16:00
  • win2003 Server配置SQL Server 2005远程连接的方法

    2024-01-17 10:09:06
  • Django实现发送邮件功能

    2021-05-13 10:25:44
  • asp之家 网络编程 m.aspxhome.com