async/await实现Promise.acll()简介

 更新时间:2022年11月30日 11:53:15   作者:不叫猫先生  
Promise.all() 方法接收一个 promise 的 iterable 类型的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组,这篇文章主要介绍了async/await实现Promise.acll()简介,需要的朋友可以参考下

一、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.acll()

先定义三个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.acll()结合使用

因为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.acll()简介的文章就介绍到这了,更多相关async/await实现Promise.acll()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JSON的parse()方法介绍

    JSON的parse()方法介绍

    今天小编就为大家分享一篇关于JSON的parse()方法介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • JavaScript数据结构之二叉树的查找算法示例

    JavaScript数据结构之二叉树的查找算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的查找算法,结合具体实例形式分析了javascript针对二叉树节点最小值、最大值的相关查找操作实现技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript setinterval延迟一秒解决方案

    JavaScript setinterval延迟一秒解决方案

    这篇文章主要介绍了JavaScript setinterval延迟一秒解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • js实现同一个页面多个渐变效果的方法

    js实现同一个页面多个渐变效果的方法

    这篇文章主要介绍了js实现同一个页面多个渐变效果的方法,涉及javascript操作渐变效果的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JS实现进度条顺滑版详细方案

    JS实现进度条顺滑版详细方案

    最近在小程序里,做了一个类似微博刷视频的需求,其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查网上看有没有什么好的方案,但最终没找到合适的。下面给大家分享JS进度条顺滑版实现代码,需要的朋友参考下吧
    2021-08-08
  • 详解js中Number()、parseInt()和parseFloat()的区别

    详解js中Number()、parseInt()和parseFloat()的区别

    本文主要对js中Number()、parseInt()和parseFloat()的区别进行详细介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • 微信小程序中实现自定义Navbar方法详解

    微信小程序中实现自定义Navbar方法详解

    这篇文章主要介绍了微信小程序中实现自定义Navbar方法,Navbar由 StatusBar和TitleBar组成,只需要知道它们各自的高度,就可以很好地完成自定义,需要的朋友可以参考下
    2024-05-05
  • 利用jsonp跨域调用百度js实现搜索框智能提示

    利用jsonp跨域调用百度js实现搜索框智能提示

    这篇文章主要为大家详细介绍了使用jsonp跨域调用百度js实现搜索框智能提示,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 简单的加密css地址防止别人下载你的CSS文件的方法

    简单的加密css地址防止别人下载你的CSS文件的方法

    阻止别人不那么容易下载或查看到你的CSS文件,高手可能阻止不了,不过新手们一时会不知所措,费一番周折了
    2009-10-10
  • javascript实现动态显示颜色块的报表效果

    javascript实现动态显示颜色块的报表效果

    本文主要介绍了javascript实现动态显示颜色块的报表效果的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论