1. 程式人生 > >ES6 Promise.then的原始碼(跟著大大寫的)

ES6 Promise.then的原始碼(跟著大大寫的)

寫原始碼可以瞭解一個函式的本質,通過對原始碼的理解可以讓你對知識有更多的瞭解,歡迎大家留言交流學習。
        function myPromise(fn){
            if(typeof(fn) !== 'function'){
                throw Error (`Promise resolver ${fn} is not a function`)
            }
            let _this=this;
            this.status="pending";
            this.data=null;
            this.resolvedArr=[];
            this.rejectedArr=[];

            function resolved(data){
                setTimeout(() => {
                    if(_this.status=='pending'){
                        _this.status = 'resolved';
                        _this.data = data;
                        _this.resolvedArr.forEach(function(fn){
                            return  fn();
                        })
                    }
                }, 0);
            }
            function rejected(err){
                setTimeout(() => {
                if (_this.status=='pending') {
                    _this.status = "rejected";
                    _this.data =err;   
                }
            }, 0);
            }
            fn(resolved,rejected);
        
        }
        myPromise.prototype.then=function(onResolved,onRejected){
            let _this = this;
            if(_this.status=='resolved'){
                return new myPromise(function(resolved,rejected){
                    let res= onResolved(_this.data)
                    if( res instanceof myPromise){  //判斷res 是不是 myPromise的例項
                        res.then(resolved,rejected)
                    }else{
                        resolved(res);
                    }
                })
            }
            if(_this.status == 'rejected'){
                return new myPromise(function(resolved,rejected){
                    let res= onResolved(_this.data)
                    if( res instanceof myPromise){  //判斷res 是不是 myPromise的例項
                        res.then(resolved,rejected)
                    }else{
                        resolved(res);
                    }
                })
            }
            if(_this.status == 'pending'){
                return new myPromise(function(resolved,rejected){
                  _this.resolvedArr.push((function (onResolved){
                      return function (){
                          var res = onResolved(_this.data)
                          if(res instanceof myPromise){
                              res.then(resolved,rejected)
                          }else{
                              resolved(res)
                          }
                      }
                  })(onResolved))
                _this.rejectedArr.push((function (onRejected) {
                            return function () {
                                var res = onRejected(_this.data)
                                if(res instanceof myPromise) {
                                    res.then(resolved, rejected)
                                } else {
                                    resolved(res)   
                                }  
                            }
                        } )(onRejected))
                })
            }
        }
        var p2=new myPromise(function(resolved,rejected){
            resolved('sasasa');
        });
        p2.then(function(data){
            console.log(data)
        },function(data){
            console.log(data)
        })

用class寫promise原始碼

       class myPromise{
            constructor(fn){
                if(typeof(fn) !== 'function'){
                throw Error (`Promise resolver ${fn} is not a function`)
                }
                this.status="pending";
                this.data=null;
                this.resolvedArr=[];
                this.rejectedArr=[];
                let _this=this
                function resolved(data){
                    setTimeout(() => {
                        if(_this.status=='pending'){
                            _this.status = 'resolved';
                            _this.data = data;
                            _this.resolvedArr.forEach((fn)=>fn())
                        }
                    }, 0);
                }
                function rejected(err){
                    setTimeout(() => {
                    if (_this.status=='pending') {
                        _this.status = "rejected";
                        _this.data =err;   
                    }
                }, 0);
                }
                fn(resolved,rejected)
             }
            then(onResolved,onRejected){
                        let _this = this;
                    if(_this.status=='resolved'){
                        return new myPromise((resolved,rejected)=>{
                            let res= onResolved(_this.data)
                            if( res instanceof myPromise){  //判斷res 是不是 myPromise的例項
                                res.then(resolved,rejected)
                            }else{
                                resolved(res);
                            }
                        })
                    }
                    if(_this.status == 'rejected'){
                        return new myPromise((resolved,rejected)=>{
                            let res= onResolved(_this.data)
                            if( res instanceof myPromise){  //判斷res 是不是 myPromise的例項
                                res.then(resolved,rejected)
                            }else{
                                resolved(res);
                            }
                        })
                    }
                    if(_this.status == 'pending'){
                        return new myPromise((resolved,rejected)=>{
                        _this.resolvedArr.push(((onResolved)=>
                                 ()=>{
                                let res = onResolved(_this.data)
                                if(res instanceof myPromise){
                                    res.then(resolved,rejected)
                                }else{
                                    resolved(res)
                                }
                            
                        })(onResolved))
                        _this.rejectedArr.push(((onRejected)=> 
                                     ()=> {
                                        let res = onRejected(_this.data)
                                        if(res instanceof myPromise) {
                                            res.then(resolved, rejected)
                                        } else {
                                            resolved(res)   
                                        }  
                                    }
                                 )(onRejected))
                        })
                    }
            }   
        }