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()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript可选链的实现示例

    JavaScript可选链的实现示例

    本文主要介绍了JavaScript可选链的实现示例,它通过使用问号(?)来判断属性或函数是否存在,避免了因为属性或函数不存在而导致的错误,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • javascript中利用柯里化函数实现bind方法

    javascript中利用柯里化函数实现bind方法

    这篇文章主要为大家详细介绍了javascript中利用柯里化函数实现bind方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 通过flv.js播放监控示例深入探究直播流技术

    通过flv.js播放监控示例深入探究直播流技术

    本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑,虽然官网给的 Getting Started 只有短短几行代码,跑一个能播视频的 demo 很容易,但是播放时各种各样的异常会搞到你怀疑人生,下面我将自己踩过的坑,以及踩坑过程中补充的相关知识,详细总结一下
    2023-10-10
  • JavaScript学习笔记之数组去重

    JavaScript学习笔记之数组去重

    这篇文章主要介绍了JavaScript学习笔记之数组去重的相关资料,需要的朋友可以参考下
    2016-03-03
  • 微信小程序实战之网易云音乐歌曲详情页实现代码

    微信小程序实战之网易云音乐歌曲详情页实现代码

    本文给大家介绍了微信小程序学习记录之网易云音乐歌曲详情页代码实现,代码分为html、css和js部分,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • jqgrid 表格数据导出实例

    jqgrid 表格数据导出实例

    jqgrid并没有自带导出表格数据的方法,这里就自己实现了一个,尝试过在页面直接将数据导出,发现只有IE下可以通过调用saveas来实现,但是别的浏览器不支持,于是考虑将数据传回后台,然后后台返回下载文件来实现
    2013-11-11
  • JS中使用FormData上传文件、图片的方法

    JS中使用FormData上传文件、图片的方法

    这篇文章主要介绍了JS中使用FormData上传文件、图片的方法的相关资料,需要的朋友可以参考下
    2016-08-08
  • js实现倒计时时钟的示例代码

    js实现倒计时时钟的示例代码

    本篇文章主要是对js倒计时时钟的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • javascript实现文件拖拽事件

    javascript实现文件拖拽事件

    这篇文章主要为大家详细介绍了javascript实现文件拖拽事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-03-03
  • JS字符串去除连续或全部重复字符的实例

    JS字符串去除连续或全部重复字符的实例

    这篇文章主要介绍了JS字符串去除连续或全部重复字符的实例,需要的朋友可以参考下
    2018-03-03

最新评论