关于手写Promise有感

• 原文地址 juejin.cn/post/699459…

• 首先我们来看一下Promise的写法

let pro=new Promise((resolve,rejected)=>{
    resolve("成功")
})

let pro_A=new Promise((resolve,rejected)=>{
    rejected("失败")
})

let pro_B=new Promise((resolve,rejected)=>{
    thorw("失败")
})

• 首先我们要浮现上面的写法出来

   class MyPromise{
      constructor(fn){
          this.initVlaue()
          this.initBind()
            
          try{
          
          fn(this.resolve,this.rejected)
       
          }catch{
            throw()
          }
            
      },
      
      
      initVlaue(){
          
          this.PromiseState="pending"
          this.PromiseResult=null
      
      },
      
      initBind(){
          this.resolve.bind(this)
          this.
          
          rejected.bind(this)
      },
      
      
      resolve(val){
          
          if(this.PromiseState==="pending"){
              this.PromiseState="fulfilled"
             return this.PromiseResult=val
          
          }
          
      },
      
      rejected(val){
            if(this.PromiseState==="pending"){
              this.PromiseState="rejected"
            return this.PromiseResult=val
          
          }
      },
      
      then(callBack,callBack_Error){
        Object.prototype.toString.call(callBack)=== '[object Function]'? callBack:""
        Object.prototype.toString.call(callBack_Error)=== '[object Function]'?callBack_Error:""
        
        if(this.PromiseState==="fulfilled"){
            //this.resolve()
            callBack(this.PromiseResult)
            
        }else if(this.PromiseState==="rejected"){
            
            //this.rejected()
            
            callBack_Error(this.PromiseResult)
        }
        
                
      }
   
   }
   

• 上面我们已经实现了一些基本的用法，后面我们来实现有定时器的情况该怎么办，设想一下，我们有定时器时是隔了多少时间我们才改变状态才执行resolve或者rejected,所以我们在.then的时候去判断他是不是pending

      
         
      initVlaue(){
          
          this.PromiseState="pending"
          this.PromiseResult=null
          
          this.callBackArr=null
          this.callBack_Error_Arr=null
      
      },
      
      
            
      resolve(val){
          
          if(this.PromiseState==="pending"){
              this.PromiseState="fulfilled"
              this.PromiseResult=val
              if(this.callBackArr!==null){
              this.callBackArr(this.PromiseResult)
            }
        
              
             return  this.PromiseResult
          
          }
          
          
      },
      
      rejected(val){
            if(this.PromiseState==="pending"){
              this.PromiseState="rejected"
              this.PromiseResult=val
                if(this.callBack_Error_Arr!===null){
              this.callBack_Error_Arr(this.PromiseResult)
              
              }
              
               return  this.PromiseResult
          
          }
          
       
          
       },
          
      
      
      then(callBack,callBack_Error){
        Object.prototype.toString.call(callBack)=== '[object Function]'? callBack:""
        Object.prototype.toString.call(callBack_Error)=== '[object Function]'?callBack_Error:""
        
        if(this.PromiseState==="fulfilled"){
            //this.resolve()
            callBack(this.PromiseResult)
            
        }else if(this.PromiseState==="rejected"){
            
            //this.rejected()
            
            callBack_Error(this.PromiseResult)
        }else if(this.PromiseState==="pending"){
            this.callBackArr=callBack
            this.callBack_Error_Arr=callBack_Error
            
            
        }
        
                
      }

• 那么如何实现链式调用呢相当于在.then的时候返回一个Promise 这个比较绕,解释一下就是因为需要在.then之后继续.then 所以需要返回一个Promise ,这个Promise可以手动创建,然后创建Promise之后,在回调里面定义一个函数这个函数接收一个callBack,我们拿到之后判断传入的还是不是Promise如果是的话就继续.then不是的话就开始改变状态，而执行这个回调就是我们之前保存的回调函数

        then(callBack,callBack_Error){
        Object.prototype.toString.call(callBack)=== '[object Function]'? callBack:""
        Object.prototype.toString.call(callBack_Error)=== '[object Function]'?callBack_Error:""
        
        
        var pro= new MyPromise((resolve,reject)=>{
            
            var rePro=(callBack)=>{
                try{
                    var x= callBack(this.PromiseResult)
                    
                    if(x===rePro){
                        new Error("不能返回自身")
                    }
                    
                    if(x instanceOf MyPromise){
                        x.then(resolve,reject)
                    }else{
                        resolve(x)
                    }
                    
                }catch(err){
                    reject(err)
                    throw new Error(err)
                }
            
            }
        
        })
        
        
        
        
        
        
        if(this.PromiseState==="fulfilled"){
            //this.resolve()
            callBack(this.PromiseResult)
            
        }else if(this.PromiseState==="rejected"){
            
            //this.rejected()
            
            callBack_Error(this.PromiseResult)
        }else if(this.PromiseState==="pending"){
            this.callBackArr=rePro.bind(this,callBack)
            this.callBack_Error_Arr=rePro.bind(this,callBack_Error)
            
            
            
            
        }
        return pro
        
                
      }