Promise源码实现1-CSDN博客

promise基本使用

    let p = new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve('ok')
        })
    })
    
    p.then(function(data){
        console.log('success',data)
    },function(err){
        console.log(err)
    }).then(function(data){
        console.log('success',data)
    },function(err){
        console.log(err)
    })
复制代码

Promise是一个类，并且有三种状态status（pending,fulfilled,rejected），实例化Promise的时候传递一个函数（执行器）并且这个函数是立即执行的。函数包括两个参数，第一个是成功的回调，第二个是失败的回调

    function Promise(executor){
        let self = this; // 防止后面this冲突
        self.status = 'pending'; // 状态默认
        self.value = undefined;  // 成功的值
        self.reason = undefined; // 失败的原因
        
        // 成功的回调
        function resolve(value){
            // 只有状态是pending才能转化为成功或者失败
            if(self.status ==='pending'){
                 self.value = value;
                self.status = 'fulfilled';
            }
        }
        
        // 失败的回调
        function reject(reason){
            if(self.status ==='pending'){
                self.reason = reason;
                self.status = 'rejected'
            }
        }
        try{
            executor(resolve,reject) // 执行失败直接reject失败
        }catch(e){
            reject(e)
        }
    }
    module.exports = Promise
复制代码

Promise所有实例有then方法，所以可以定义在Promise的原型上，并且有两个参数第一个是成功执行的逻辑，第二个是失败执行的逻辑

    function Promise(executor){
        //....
        self.onResolvedCallbacks = []; // 成功的回调数组
        self.onRejectedCallbacks = []; // 失败的回调数组
        
        function resolve(value){
            if(self.status==='pending'){
                //...
                // 遍历成功的回调数组依次执行
                self.onResolvedCallbacks.forEach(function(fn){
                    fn()
                })
            }
        }
        
        function reject(reason){
            if(self.status==='pending'){
                //...
                // 遍历失败的回调数组依次执行
                self.onRejectedCallbacks.forEach(function(fn){
                    fn()
                })
            }
        }
    }
    Promise.prototype.then = function(onFulfilled,onRejected){
        let self = this;
        // 成功
        if(self.status ===''fulfilled){
            onFulfilled(self.value)
        }
        
        //失败
        if(self.status==='rejected'){
            onRejected(self.reason)
        }
        // 如示例那样 实例化Promise的时候，是异步的情况 这时候的在status为pending
        // 有异步
        if(self.status === 'pending'){
            // 发布订阅模式，可以先将then后的成功或者失败的处理方法暂时保存起来，当resolve或者reject的时候，以此遍历执行即可。
            
            self.onResolvedCallbacks.push(function(){
                onFulfilled(self.value)
            })
            
            self.onRejectedCallbacks.push(function(){
                onRejected(self.reason)
            })
        }
        
    }
复制代码

Promise实例p的then方法是可以链式调用的，所以每次then之后要返回一个Promise实例，按照规范需要返回一个新的Promise，暂且命名为promise2

    // 核心方法  处理成功或者失败执行的返回值 和 promise2的关系
    function resolvePromise(promise2,x,resolve,reject){
        
    }
    
    Promise.prototype.then = function(onFulfilled,onRejected){
        //...
        let promise2;
        promise2 = new Promise(function(resolve,rejecte){
            // 因为new Promise的时候执行器直接执行 所以可以将上述代码直接放入这个里面就可以了。
            // 成功
            if(self.status ==='fulfilled'){
                // 我们知道then的时候成功的函数有三种返回状态：原始值、新的promise、throw Error() 抛出错误
                setTimeout(()=>{ // 这个定时器的作用是，实例化的时候并不能获得promise2 所以价格延迟来获取
                    try{ // 捕获x为throw Error的时候的异常
                    // 暂定x为其返回值
                        let x = onFulfilled(self.value);
                        // 然后根据x的具体情况来执行promise2，也就是下一个then的成功或者失败，暂定处理函数为resolvePromise
                        resolvePromise(promise2,x,resolve,reject)
                    }catch(e){
                        reject(e)
                    }
                },0)
            }
            
            //失败
            if(self.status==='rejected'){
               setTimeout(()=>{
                   try{
                       let x = onRejected(self.reason)
                       resolvePromise(promise2,x,resolve,reject)
                   }catch(e){
                       reject(e)
                   }
               },0)
               
            }
            // 如示例那样 实例化Promise的时候，是异步的情况 这时候的在status为pending
            // 有异步
            if(self.status === 'pending'){
                // 发布订阅模式，可以先将then后的成功或者失败的处理方法暂时保存起来，当resolve或者reject的时候，以此遍历执行即可。
                
                self.onResolvedCallbacks.push(function(){
                    try{
                        let x = onFulfilled(self.value)
                        resolvePromise(promise2,x,resolve,reject)
                    }catch(e){
                        reject(e)
                    }
                })
                
                self.onRejectedCallbacks.push(function(){
                    setTimeout(()=>{
                       try{
                           let x = onRejected(self.reason)
                           resolvePromise(promise2,x,resolve,reject)
                       }catch(e){
                           reject(e)
                       }
                   },0) 
                })
            }
        })
        
        return promise2
    }
复制代码