手动实现promise.all race any allSettled

手动实现***promise.all promise.race promise.allsetted promise.any***

script代码

 const p1 = Promise.resolve('p1');
 const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('P2延时了1秒钟')
        }, 1000)
    });
const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('P3延时了2秒钟')
        }, 5000)
    });
const p4 = Promise.reject('p4 rejected');
const p5 = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('P5 rejected延时了4秒钟')
        }, 4000)
    });

1 promise.all

1.1原生promise.all测试

Promise.all接收一个可遍历的数组容器,当数组中每个promise实例都成功时,promise.all才成功。promise实例所有的resolve结果会按原来的顺序集合在一个数组中作为Promise.all的resolve的结果
只要有一个失败就失败promise.catch就会捕获到这个reject。

//全部resolve
Promise.all([p1,p2,p3])
.then(res=>console.log(res))
.catch(err=>console.log(err)) //['p1', 'P2延时了1秒钟', 'P3延时了2秒钟']
// 有一个reject
Promise.all([p1,p2,p5])
.then(res=>console.log(res))
.catch(err=>console.log(err)) // P5 rejected延时了4秒钟

// 有两个rejected
Promise.all([p1, p5, p4]).then(res => console.log(res)).
catch(err => console.log(err)) //p4 rejected

1.2 手动实现–上代码

//promise.all 接收一个数组 返回一个promise对象,若全部成功返回数组,若一个失败则返回reject的内容
Promise.myAll=(promises)=>{
  let arr=[];
  let count=0;
  return new Promise((resolve,reject)=>{
    promises.forEach((item,i)=>{
    	Promise.resolve(item).then(res=>{
    	  arr[i]=res;
    	  count+=1;
    	  if(promises.length === count) resolve(arr)
    	})
   },reject)
  })
}

2 promise.race

2.1 原生promise.race测试

Promise.race相当于是赛跑, 最先resolve,reject的先返回

// 全部resolve
 Promise.race([p1, p2, p3])
 .then(res => console.log(res))
 .catch(err => console.log(err)) //p1
//有一个reject
Promise.race([p1, p2, p5])
.then(res => console.log(res))
.catch(err => console.log(err)) //p1
 // 有两个rejected
Promise.race([p1, p5, p4])
.then(res => console.log(res))
.catch(err => console.log(err)) //p4 rejected

2.2 手动实现promise.race

Promise.myRace=(promises)=>{
   return new Promise((resolve,reject)=>{
    promises.forEach(item=>{
    	Promise.resolve(item).then(res=>resolve(res),reject)
    })
  })
}

3 promise.any

promise.any 中只要有一个Promise实例成功就成功,只有当所有的Promise实例失败Promise.any才失败,此时Promise.any会把所有的失败/错误集合在一起,返回一个失败的promise和AggregateError 类型的实例

3.1 测试原生promise.any

    Promise.any([p1, p2, p3]).then(res => {
        console.log(res)
    }).catch(err => console.log(err)) //p1

    Promise.any([p1, p2, p5]).then(res => {
        console.log(res)
    }).catch(err => console.log(err)) //p1

    Promise.any([p4, p5, p1]).then(res => {
       console.log(res)
    }).catch(err => console.log(err)) //p1
    Promise.any([p1, p5, p4]).then(res => {
       console.log(res)
    }).catch(err => console.log(err)) //p1
    Promise.any([p5, p4]).then(res => {
       console.log(res)
    }).catch(err => console.log(err)) //AggregateError: All promises were rejected

3.2 手动实现

Promise.myAny = (promises) => {
    let arr = [];
    let count = 0;
    return new Promise((resolve, reject) => {
        promises.forEach(item => {
            Promise.resolve(item).then(res => resolve(res), err => {
               count += 1;
               if (count === promises.length) 
               reject('AggregateError: All promises were rejected')
                })
            })
        })
    }

4 promise.allSettled

希望一组promise实例无论在成功与否,都等他们异步操作结束了在继续执行下一步操作

4.1 原生promise.allSettled测试

    Promise.allSettled([p1, p2, p3])
    .then(res => {console.log(res)})
    .catch(err => console.log(err)) 
    // [
    //     {status: 'fulfilled', value: 'p1'},
    //     {status: 'fulfilled', value: 'P2延时了1秒钟'},
    //     {status: 'fulfilled', value: 'P3延时了2秒钟'
    // ] 

     Promise.allSettled([p1, p2, p5]).then(res => {
        console.log(res)
    }).catch(err => console.log(err)) 
    // [
    //     {status: 'fulfilled', value: 'p1'},
    //     {status: 'fulfilled', value: 'P2延时了1秒钟'},
    //     {status: 'rejected', reason: 'P5 rejected延时了1秒钟'}
    // ]

4.2手动实现promise.allSettled

Promise.myAllSettled=(promises)=>{
   let arr=[];
   let count=0;
   return new Promise((resolve,reject)=>{
      promises.forEach((item,i)=>{
        Promise.resolve(item).then(res=>{
           arr[i]={status:"fulfilled",value:res}
           count+=1;
           if(count === promises.length) resolve(arr)
        },err=>{
          arr[i]={status:'rejected',value:err}
          count+=1;
          if(count === promises.length) resolve(arr)
        })
      })
   })
}

//优化一下下
Promise.myAllSettled = (promises) => {
        let arr = [];
        let count = 0;
        return new Promise((resolve, reject) => {
            const func = (i, status, res) => {
                arr[i] = { status: status, value: res }
                count += 1;
                if (count === promises.length) resolve(arr)
            }
            promises.forEach((item, i) => {
                Promise.resolve(item).then(res => {
                    func(i, "fulfilled", res)
                }, err => {
                    func(i, "rejected", err)
                })
            })
        })
    }

仅供自己学习使用,如有错误欢迎指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值