返回顶部
首页 > 资讯 > 前端开发 > JavaScript >async/await实现Promise.all()的方式
  • 802
分享到

async/await实现Promise.all()的方式

async/await实现Promise.all()async Promise.all() 2022-12-19 12:12:32 802人浏览 泡泡鱼
摘要

目录一、Promise.all()简介二、async/await实现Promise.all()1、方式一2、方式二三、async/await与Promise.all()结合使用一、P

一、Promise.all()简介

Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 es6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组

  • Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候
  • Promise的 reject 回调执行是只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且只要有 reject 就会立即抛出的错误信息。

二、async/await实现Promise.all()

先定义三个Promise实例对象,并放置于一个数组

        let a = new Promise((res, rej) => {
			res(1)
		}).catch(err => console.log(err))
		let b = new Promise((res, rej) => {
			setTimeout(() => {
				rej(2)
			}, 2000)
		}).catch(err => console.log(err))
		let c = new Promise((res, rej) => {
			res(3)
		}).catch(err => console.log(err))
       const arr = [a, b, c]

1、方式一

-使用async/await,循环遍历Promise实例对象的数组,并把每个Promise对象的结果放置于一个空数组中。

		async function bb() {
			let arr1 = [];
			try {
				for (let i = 0; i < arr.length; i++) {
					let h = await arr[i]
					arr1.push(h)
				}
			} catch (err) {
			}
			return arr1
		}
		
		bb().then(res => {
			console.log(res); //[1, undefined, 3]
		});

undefined是因为await只处理成功时resolve(),不处理失败异常,故返回undefined

2、方式二

该方面类似实现手写Promise.acll(),等await拿到Promise结果然后count加1,知道count的数值等于数值的长度在resolve()

      const all = (arr) => {
  			return new Promise((resolve, reject) => {
				let length = arr && arr.length
				let count = 0
				let result = []
				if (!arr || arr.length === 0) {
					resolve(result)
				}
				arr.forEach(async (item, index) => {
					try {
						const res = await item
						result[index] = res
						count++
						if (count === length ) {
							resolve(result)
						}
					} catch (err) {
						reject(err)
					}
				});
			})
		}

三、async/await与Promise.all()结合使用

因为Promise.all()返回的也是Promise,所以await 后面可以跟Promise.all()

         function fn() {
			return new Promise((resolve, reject) => {
				resolve(Math.random())
			})
		}
		async function asyncFunc() {
			let result
			try {
				result = await Promise.all([fn(), fn()])
				console.log(result)
			} catch (err) {
				console.log(err, 'err')
			}
			return result
		}
      asyncFunc().then(res => { console.log(res, 'res') })

到此这篇关于async/await实现Promise.all()的文章就介绍到这了,更多相关async/await实现Promise.all()内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: async/await实现Promise.all()的方式

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

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

猜你喜欢
  • async/await实现Promise.all()的方式
    目录一、Promise.all()简介二、async/await实现Promise.all()1、方式一2、方式二三、async/await与Promise.all()结合使用一、P...
    99+
    2022-12-19
    async/await实现Promise.all() async Promise.all()
  • JavaScript引擎实现async/await的方法实例
    目录前言生成器 VS 协程async/awaitasyncawait小结总结前言 我们都知道Promise 能很好地解决回调地狱的问题,但是这种方式充满了 Promise 的 the...
    99+
    2024-04-02
  • useEffect支持async及await使用方式
    目录引言背景React 为什么要这么做?useEffect 怎么支持 async...await...自定义 hooks还可以支持 useEffect 的清除机制么?总结与思考引言 ...
    99+
    2024-04-02
  • Rust 实现 async/await的详细代码
    目录FutureWake & Context为什么需要 executor ?什么是 waker ?async/awaitExecutorWaker struct 到 ArcW...
    99+
    2024-04-02
  • JavaScript引擎如何实现async/await
    这篇文章主要介绍了JavaScript引擎如何实现async/await,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言我们都知道Promise 能很好地解决回调地狱的问题...
    99+
    2023-06-29
  • .NET实现异步编程async和await
    await和async是.NET Framework4.5框架、C#5.0语法里面出现的,await和async是语法糖。 注意: 1、async出现在方法的声明里面,任何一个方法都...
    99+
    2024-04-02
  • C#async/await任务超时处理的实现
    目录一、需求二、Task取消任务三、Task取消任务的回调四、Task超时处理的实现五、Task.WhenAny 的异常六、其他的写法一、需求 在之前的帖子中,介绍了 as...
    99+
    2023-02-06
    C# async任务超时 C# await任务超时
  • JavaScript中async await更优雅的错误处理方式
    目录背景 为什么要错误处理 async await 更优雅的错误处理 小结 总结背景 团队来了新的小伙伴,发现我们的团队代码规范中,要给 async  await 添加 ...
    99+
    2024-04-02
  • JavaScript中async,await的使用和方法
    JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log...
    99+
    2024-04-02
  • js中怎么用async和await实现同步
    这篇“js中怎么用async和await实现同步”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么用async和awa...
    99+
    2023-06-29
  • .NET怎么实现异步编程async和await
    本篇内容介绍了“.NET怎么实现异步编程async和await”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!await和async是.NET...
    99+
    2023-06-29
  • JavaScript中async与await实现原理与细节
    目录一、回调地狱二、Promise三、生成器(generator)四、使用生成器同步化promise五、async、await异步代码究极解决方案一、回调地狱 在es6兴起之后许多人...
    99+
    2024-04-02
  • C#使用async和await实现异步编程
    最近在写程序的时候,经常遇到大量需要异步访问的情况,但是对于async和await到底怎么写,还不是非常明确。 1.普通的程序怎么写? class Program { sta...
    99+
    2024-04-02
  • Swift 中的 async/await ——代码实例详解
    前言 async-await 是在 WWDC 2021 期间的 Swift 5.5 中的结构化并发变化的一部分。Swift 中的并发性意味着允许多段代码同时运行。这是一个非常简化的描述,但它应该让你知道 Swift 中的并发性对你的应用程序...
    99+
    2023-08-17
    swift ios 开发语言
  • js异步之async和await实现同步写法
    首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的。 var gen = function* (){     var a = yield read...
    99+
    2024-04-02
  • NodeJs通过async/await处理异步的方法
    场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理。在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数。我们来模拟一个Mongo数据库的操...
    99+
    2022-06-04
    方法 NodeJs async
  • C#怎么使用async和await实现异步编程
    这篇文章主要介绍“C#怎么使用async和await实现异步编程”,在日常操作中,相信很多人在C#怎么使用async和await实现异步编程问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#怎么使用async...
    99+
    2023-07-02
  • Node.js中Express框架使用axios同步请求(async+await)实现方法
    axios一般是作为异步请求使用的,但是某种特殊情况下需要同步请求,如何实现呢? 首先定义一个方法syncAxios let axios = require('axios'); e...
    99+
    2023-05-15
    Node.js Express axios 同步请求 async await
  • es7中的async、await使用方法示例详解
    目录一、前言二、async 和 await 的基础使用三、async \ await使用场景四、await返回打印测试五、总结async、await 是es7里面的新语法,它的作用就...
    99+
    2023-01-28
    async await使用 async await示例
  • 关于C#中async/await的用法实例详解
    一直对c#中async/await的用法模模糊糊,不太清晰,今天写了一下Demo彻底明确一下async/await的用法,以免因为对其不了解而对后期的业务产生影响(比如事务导致的锁表...
    99+
    2023-02-08
    C#中async/await的用法 C#中async/await
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作