JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

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

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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 循环中使用

由于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总是真的，所以所有选项都通过了过滤

附使用小结

  1. 如果你想连续执行await调用，请使用for循环(或任何没有回调的循环)。
  2. 永远不要和forEach一起使用await，而是使用for循环(或任何没有回调的循环)。
  3. 不要在 filter 和 reduce 中使用 await，如果需要，先用 map 进一步骤处理，然后在使用 filter 和 reduce 进行处理。

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

总结

到此这篇关于JS循环中正确使用async、await的文章就介绍到这了,更多相关JS循环中使用async、await内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的JS循环中正确使用async、await的姿势分享全部内容，希望文章能够帮你解决JS循环中正确使用async、await的姿势分享所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程