Promise对象all与race方法手写示例
前言
在理解了手写promsie.then
的方法后,再来看它的其他方法,感觉真的简单了不少。
Promise.all
介绍
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all()
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例。另外,Promise.all()
方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
手写
- 返回一个
Promsie
对象
const promiseAll = (array) => { return new Promise((resolve, reject) => { }) }
- 判断传入的是数组
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要传入数组') } return new Promise((resolve, reject) => { } }
- 遍历数组,再判断数组中每个元素是否为
Promsie
对象的实例,并对此分情况处理
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要传入数组') } return new Promise((resolve, reject) => { let result = []; array.forEach((item, index) => { if (item instanceof Promise) { item.then(res => { result[index] = res }, err => { return reject(err) }) } else { result[index] = item } }) }) }
- 设置一个计数器
count
,当遍历完了所有数组里面的值,就把result
数组打印出来
const promiseAll = (array) => { if (!Array.isArray(array)) { throw new Error('要传入数组') } return new Promise((resolve, reject) => { let result = []; let count = 0; array.forEach((item, index) => { if (item instanceof Promise) { item.then(res => { result[index] = res count++; if (count == array.length) { return resolve(result) } }, err => { return reject(err) }) } else { result[index] = item count++; if (count == array.length) { return resolve(result) } } }) }) }
Promise.race
介绍
Promise.race()
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
上面代码中,只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
手写
- 返回一个
Promise
对象
let promiseRace = (array) => { return new Promise((resolve, reject) => { }) }
- 判断传入的参数是否为数组
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回数组') } return new Promise((resolve, reject) => { }) }
- 遍历数组,再判断数组中每个元素是否为
Promsie
对象的实例,再对此分情况处理
let promiseRace = (array) => { if (!Array.isArray(array)) { throw new Error('要返回数组') } return new Promise((resolve, reject) => { array.forEach((item) => { if (item instanceof Promise) { item.then(res => { return resolve(res) }, err => reject(err)) } else { return resolve(item) } }) }) }
参考文档
Promise 对象 - Promise.any()
以上就是Promise对象all与race方法手写示例的详细内容,更多关于Promise对象all race方法的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7175387491027910711
相关文章
- 这篇文章主要介绍了java8如何用Stream查List对象某属性是否有重复的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-11
- 这篇文章主要介绍了R语言删除指定变量或对象的操作方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效
这篇文章主要介绍了解决IDEA maven 项目修改代码不生效,mvn clean、install后才生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
如何在Spring WebFlux的任何地方获取Request对象
这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象,帮助大家更好的理解和使用springboot框架,感兴趣的朋友可以了解下...2021-01-26牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作
只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作。这就需要我们知道如何将jQuery对象和DOM的相互转换的方法。1...2015-10-30- Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧...2021-10-21
- js调试中经常会碰到输出的内容是对象而无法打印的时候,光靠alert只能打印出object标示,却不能打印出来里面的内容,甚是不方便,于是各方面整理总结了如下一个函数,能够将数组或者对象这类的结果一一打印出来,具体代码如下: fu...2015-10-21
- 本文给大家介绍如何替换json对象中的key,通过实例代码给大家介绍key的替换方法,代码也很简单,需要的朋友参考下吧...2021-06-02
vue初始化项目出现unable to access ‘https://github.com/nhn/raphael.git/’解决有效
vue初始化项目出现npm ERR! fatal: unable to access ‘https://github.com/nhn/raphael.git/’: OpenSSL SSL_read:错误unable to access ‘https://github.com/nhn/raphae...2022-08-14- 这篇文章主要介绍了javascript self对象使用详解的相关资料,需要的朋友可以参考下...2016-10-20
ActiveX部件不能创建对象:dm.dmsoft代码:800A01AD
vbs调用插件报:ActiveX部件不能创建对象,代码:800A01AD,一般是因为病毒导致dll文件丢失或者64系统问题导致,需要的朋友可以参考下...2020-06-30- 这篇文章主要介绍了封装 axios+promise通用请求函数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
解决pycharm下载库时出现Failed to install package的问题
很多小伙伴遇到pycharm下载库时出现Failed to install package不知道怎么解决,下面小编给大家带来了解决方法,需要的朋友参考下吧...2021-09-04- 这篇文章主要为大家介绍了JavaScript事件对象,了解JavaScript事件...2016-01-26
jQuery的promise与deferred对象在异步回调中的作用
这篇文章主要介绍了jQuery的promise与deferred对象在异步回调中的作用,需要的朋友可以参考下...2016-05-05- 这篇文章主要介绍了Xml中使用foreach遍历对象实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-04
解决redisTemplate中leftPushAll隐性bug的问题
这篇文章主要介绍了解决redisTemplate中leftPushAll隐性bug的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13R语言 install.packages 无法读取索引的解决方案
这篇文章主要介绍了R语言 install.packages 无法读取索引的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06解决SpringCloud Feign传对象参数调用失败的问题
这篇文章主要介绍了解决SpringCloud Feign传对象参数调用失败的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-24