async/await实现Promise.all()

举报
猫先生c 发表于 2023/09/25 14:35:12 2023/09/25
【摘要】 Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且**只返回一个Promise实例**,并且**输入的所有 promise 的 resolve 回调的结果是一个数组**。

🐱个人主页:不叫猫先生
🙋‍♂️作者简介:专注于前端领域各种技术,热衷分享,期待你的关注。
(https://blog.csdn.net/qq_38951259/category_12028524.html)
📝个人签名:不破不立

一、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') })
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。