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

2024-04-02 19:04:59 913人浏览安东尼

摘要

目录概览(循环方式 - 常用)声明遍历的数组和异步方法for 循环中使用map 中使用forEach 中使用filter 中使用附使用小结总结概览(循环方式 - 常用) f

概览(循环方式 - 常用)

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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JS循环中正确使用async、await的姿势分享

本文链接: https://lsjlt.com/news/160209.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

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

目录概览(循环方式 - 常用)声明遍历的数组和异步方法for 循环中使用map 中使用forEach 中使用filter 中使用附使用小结总结概览(循环方式 - 常用) f...

99+

2024-04-02
JS循环中正确使用async、await的方法是什么

JS循环中正确使用async、await的方法是什么，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。概览(循环方式 - 常用)formapforEachfilter声明遍历的...

99+

2023-06-22
调用java.lang.Runtime.exec的正确姿势分享

目录调用java.lang.Runtime.exec的正确姿势两种方法小结一下Java Runtime.exec()注意事项1.Runtime.exec() 有四种调用方法2.得到程...

99+

2024-04-02
vue中正确使用jsx语法的姿势分享

目录前言虚拟DOM 什么是虚拟DOM 虚拟DOM的优点渲染函数是什么 jsx 在vue3中编写jsx的两种方式用法最后参考前言又到了愉快的摸鱼时间,我觉得不能荒废,H5页面...

99+

2024-04-02
Mybatis重置Criteria的正确姿势分享

目录Mybatis重置Criteria发现问题原因如下我们想重置查询条件怎么办？得出一个结论Mybatis的Criteria用法总结Mybatis重置Criteria 开发中遇到My...

99+

2024-04-02
MySQL8.0修改密码的正确姿势分享

目录前言mysql5.7.9之后取消了password函数，authentication_string=password("123456")会报错正确更...

99+

2024-04-02
springboot配置加密的正确姿势分享

目录前言一、使用步骤1.引入依赖2. yml配置3. 使用总结主要介绍springboot项目中配置文件的加密前言为了保证服务器相关信息的保密,一般会采用加密的方式进行对配置文件...

99+

2022-11-16

springboot配置加密 springboot配置详解
Webpack中使用环境变量的各种正确姿势

目录写在前边业务代码使用环境变量使用webpack.DefinePlugin插件在业务代码中注入环境变量webpack.DefinePlugin引发的思考definePlugin所谓...

99+

2024-04-02
使用Java8中Optional机制的正确姿势

前言Java8带来的函数式编程特性对于习惯命令式编程的程序员来说还是有一定的障碍的，我们只有深入了解这些机制的方方面面才能运用自如。Null的处理在JAVA编程中是出了try catch之外的另一个头疼的问题，需要大量的非空判断模板代码，程...

99+

2023-05-30

java8 optional 使用
vue项目中使用websocket的正确姿势

1. 在utils下新建websocket.js文件 // import { showInfoMsg, showErrorMsg } from '@/utils/popInfo' i...

99+

2024-04-02
JS中的async与await怎么使用

目录一、async 二、await: 三、综合应用一、async async创建一个异步函数来定义一个代码块，在其中运行异步代码; 怎样变成异步函数呢？以 async 这个关键字...

99+

2024-04-02
Python怎么用(Python使用的正确姿势)

Python是一种高级编程语言，广泛用于各种应用程序的开发。以下是Python的正确使用姿势：1. 安装Python：首先需要下载和...

99+

2023-09-22

python
在日志中记录Java异常信息的正确姿势分享

目录日志中记录Java异常信息遇到的问题原因分析正确的做法java异常在控制台和日志里面的打印记录1、e.printStackTrace()打印在哪里2、e.printStackTr...

99+

2024-04-02
vue3中element-plus icon图标的正确使用姿势

目录前言：改变：错误使用：正确使用：setup script扩展更新总结前言：为了适应vue3的更新，element组件也将其内容升级为了plus用以配套的使用，很多组件新增了更加...

99+

2024-04-02
在Spring环境中正确关闭线程池的姿势

目录前言线程池正确关闭的姿势应用中如何正确关闭线程池解决方案总结思考前言在Java System#exit 无法退出程序的问题一文末尾提到优雅停机的一种实现方案，要借助Shutdo...

99+

2023-05-14

Spring环境关闭线程池 Spring关闭线程池
C语言中条件判断的正确使用姿势

目录前言一、if语句二、if-else语句if语句嵌套使用if else语句的链式使用三、switch语句switch基础用法switch高级用法前言在C语言中，有三种条件判断结构...

99+

2023-05-19

C语言条件判断正确使用 C语言条件判断使用 C语言条件判断
MySQL使用AES_ENCRYPT()/AES_DECRYPT()加解密的正确姿势

遇到一个需求是这样的：需要在使用AES_ENCRYPT()函数将明文加密，存储在MySQL中，但是遇到了一些问题…… 说将加密后的密文，解密取出来是NULL。看了一下，她发过来的表结构：再看...

99+

2024-04-02
Java正确使用访问修饰符的姿势

目录1、简介 2、访问修饰符 3、原则总结1、简介访问修饰符是Java语法中很基础的一部分，但是能正确的使用Java访问修饰符的程序员只在少数。在Java组件开发中，如果能够恰...

99+

2024-04-02
JS中的async与await异步编程及await使用陷阱

ECMA2017中新加入了两个关键字async与await 简单来说它们是基于promise之上的的语法糖，可以让异步操作更加地简单明了首先我们需要用async关键字，将函数标记为...

99+

2023-03-24

async与await异步编程 async与await
JS中的async与await异步编程及await使用陷阱源码分析

这篇“JS中的async与await异步编程及await使用陷阱源码分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JS中...

99+

2023-07-05