Promise封装

Promise封装


最近对Promise有所了解,也实现了代码的封装,话不多说源码奉上

class Promise{
  //构造方法
  constructor(executor){
      //添加属性
      this.PromiseState = 'pending'
      this.PromiseResult = null 
      this.callback = []
      //保存this指向Promise实例对象
      let self = this

      function resolve(data){
        if(self.PromiseState !== 'pending')return;
        self.PromiseState = 'fulfilled' //resolve
        self.PromiseResult = data

        setTimeout(()=>{
          self.callback.forEach(item=>{
            item.onResolved(data)
          })
        })
        
      }
      function reject(data){
        if(self.PromiseState !== 'pending')return;
        self.PromiseState = 'rejected' //reject
        self.PromiseResult = data

        setTimeout(()=>{
          self.callback.forEach(item=>{
            item.onRejected(data)
          })
        })
      }
      //捕获异常
      try{
        //同步调用执行器函数
        executor(resolve,reject)
      }catch(e){//处理异常
        reject(e)
      }
  }
  //then方法的封装
  then(onResolved,onRejected){
    const self = this
    if(typeof onRejected !== 'function'){
      onRejected = reason =>{
        throw reason
      }
    }
    if(typeof onResolved !== 'function'){
      onResolved = value => value
    }
    return new Promise((resolve,reject)=>{
      //函数封装
      function callback(type){
        try{
          let result = type(self.PromiseResult)
          if(result instanceof Promise){
            result.then(v=>{
              resolve(v)
            },r=>{
              reject(r)
            })
          }else{
            resolve(result)
          }
       }catch(e){
        reject(e)
       }
      }
      //调用回调函数 PromiseState
      if(this.PromiseState === 'fulfilled'){
        setTimeout(()=>{
          callback(onResolved)
        })
      }
      if(this.PromiseState === 'rejected'){
        setTimeout(()=>{
          callback(onRejected)
        }) 
      }
  
      //判定pending状态,处理异步
      if(this.PromiseState === 'pending'){
        //每调用一次then方法就存入数组,防止覆盖
        this.callback.push({
          onRejected:function(){
           callback(onResolved)
          },
          onResolved:function(){
            callback(onRejected)
          }
        })
      }
    })
    
  }
  //catch方法的封装
  catch(onRejected){
    return this.then(undefined,onRejected)
  }
  //resolve方法的封装,凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用
  //不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.
  static resolve(value){
     //返回结果为Promise对象
      return new Promise((resolve,reject)=>{
        if(value instanceof Promise){
          value.then(v=>{
            resolve(v)
          },r=>{
            reject(r)
          })
        }else{
          resolve(value)
        }
      })
  }
  //reject方法的封装
  static reject(value){
    return new Promise((resolve,reject)=>{
      reject(value)
    })
  }
  //all方法的封装
  static all(promises){
    return new Promise((resolve,reject)=>{
      let count = 0
      let arr = []
      for(let i=0;i<promises.length;i++){
        promises[i].then(v=>{
          count++
          arr[i] = v
          if(count === promises.length)resolve(v)
        },r=>{
          reject(r)
        })
      }
    })
  }
  //race方法的封装
  static race(promises){
    return new Promise((resolve,reject)=>{
      promises[i].then(v=>{
        resolve(v)
      },r=>{
        reject(r)
      })
    })
  }
}

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值