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

更新时间：2021年12月17日 16:28:36 作者：毕了业就退休

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,下面这篇文章主要给大家介绍了关于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总是真的，所以所有选项都通过了过滤

附使用小结

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

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

总结

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

您可能感兴趣的文章:

详解JS设计模式之桥接模式用法
javascript桥接桥接设计模式（Bridge Pattern）是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下
2023-08-08
生成无限制的微信小程序码的示例代码
这篇文章主要介绍了生成无限制的微信小程序码的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
原生js实现复制对象、扩展对象类似jquery中的extend()方法
jq的extend()方法能很方便的实现扩展对象方法，这里要实现的是：原生js实现复制对象，扩展对象，类似jq中的extend()方法,需要的朋友可以参考下
2014-08-08
js文本框输入内容智能提示效果
这篇文章主要介绍了js文本框输入内容智能提示效果，非常简单实用，需要的朋友可以参考下
2015-12-12
Java 正则表达式学习总结和一些小例子
字符串处理是许多程序中非常重要的一部分,它们可以用于文本显示,数据表示,查找键和很多目的.在Unix下,用户可以使用正则表达式的强健功能实现这些目的
2012-09-09
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
这篇文章主要介绍了JavaScript函数式编程(Functional Programming)组合函数(Composition)用法,结合实例形式分析了javascript函数式编程中组合函数的概念、原理、用法及操作注意事项,需要的朋友可以参考下
2019-05-05
javascript实现漂亮的拖动层，窗口拖拽特效
一个可关闭、可随意拖动位置的网页弹出层代码，美化的相当漂亮，简洁实用，还可拖动改变大小，通过八个方向改变大小，学习这类特效编写的网页设计者可参阅一下
2015-04-04
利用JS制作万年历的方法
本篇文章主要介绍了利用JS制作万年历的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS实现自动切换文字的导航效果代码
这篇文章主要介绍了JS实现自动切换文字的导航效果代码,涉及javascript动态切换页面样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
uni-app main.js中全局变量的使用方法示例
在进行uni-app开发时,全局变量的合理使用对于提升开发效率和项目管理具有重要意义,这篇文章主要给大家介绍了关于uni-app main.js中全局变量的使用方法,需要的朋友可以参考下
2025-07-07