js--手写promise.all

核心思路:

  • 接收一个Promise实例的数组或具有Iterator接口的对象作为参数
  • 这个方法返回一个新的promise对象
  • 遍历传入的参数,用promise.reslove()将参数“包一层”,使其变成一个promise对象
  • 参数所有的回调成功才是成功,返回值数组与参数顺序是一致的
  • 参数数组其中一个失败,则触发失败状态,第一个触发失败的promise错误信息作为promise.all的错误信息

代码实现:

一般来说,promise.all 用来处理多个并发请求,也是为了页面数据构造的方便,将一个页面所用到的在不同接口的数据一起请求过来,不过,如果其中一个接口失败了,多个请求也就失败了,页面可能啥ue出不来,这就需要看当前页面的耦合程度了。

<script>
         function promiseAll(promises){
          //     返回一个新的promise对象
          return new Promise(function(reslove,reject){
               // 判断参数是否是一个数组
               if(! Array.isArray(promises)){
                    throw new TypeError('argument must be a array')
               }
               var resolvedCounter = 0
               var promiseNum = promises.length
               var reslovedResult = []
               for(let i = 0;i<promiseNum;i++){
                    Promise.resolve(promises[i]).then(value=>{
                         resolvedCounter++
                         reslovedResult[i] = value
                         if(resolvedCounter == promiseNum){
                              return reslove(reslovedResult)
                         }
                    },error=>{
                         return reject(error)
                    })
               }
          })
         }

     // 测试
     const p1 = new Promise((reslove,reject)=>{
          setTimeout(function(){
               reslove(1)
          },1000)
     })
     const p2 = new Promise((reslove,reject)=>{
          setTimeout(function(){
               reslove(2)
          },2000)
     })
     const p3 = new Promise((reslove,reject)=>{
          setTimeout(function(){
               reslove(3)
          },3000)
     })
     promiseAll([p3,p1,p2]).then(res=>{
          console.log(res)  //[3,1,2]
     })
    </script>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值