理解Promise (3)

在promise 的then 中我们不仅有成功状态失败状态，可能还有等待状态，所以我们要对等待状态进行处理

function  Promise(executor) {
    let  self  = this;
    self.value = null;
    self.reason = null;
    self.resolveCallback = [];
    self.rejectCallback = [];
    //设置默认状态
    self.status = 'pending'
    //成功函数
    function  resolve(value) {
        if(self.status=='pending') {
            self.status = 'success';
            // console.log(self.value);
            self.value =  '运行成功了';
            self.resolveCallback.forEach(fn=>fn()); // 发布
        }
    };
    //失败函数
    function  reject(reason) {
        if(self.status == 'pending') {
            self.status = 'fail';
            self.reason = '运行失败了';
            self.rejectCallback.forEach(fn=>fn()); // 发布
        }
    }
    //默认立即执行函数 传递两个参数 
    executor(resolve,reject);
}
Promise.prototype.then =  function(OnResolve,OnReject) {
    // console.log(this.value)
        if(this.status == 'success') {
            OnResolve(this.value);
        }
        if(this.status =='fail') {
            OnReject(this.reason);
        }
        //第3种状态 处于等待状态
        if(this.status == 'pending') {
            //将成功的回调push 到 resolveCallback 这个数组中
            this.resolveCallback.push(()=>{
                OnResolve(this.value);
            })
            //将失败的回调 push 到  rejectCallback 这个数组中
            this.rejectCallback.push(()=>{
                OnReject(this.reason);
            })
        }
};
module.exports= Promise;
//一进来 我们开始执行 executor函数 传递两个参数 再调用 then 方法 ，then 方法里面有  OnResolve方法，OnReject 方法
// then 方法中，我们一开始的状态是pending  然后根据 状态的不同 调用不同的函数，
// 在两个不同的函数中 我们 进行判断 因为状态一开始都是有 pending  = >  success 或者 pending =>fail
// 判断 时修改 状态 和 显示值

在 then 方法中我们先进行状态的判断，如果这个状态是 pending 状态，我们就对它进行处理

首先先声明成功状态的回调数组为空失败状态的回调数组为空

  self.resolveCallback = [];
    self.rejectCallback = [];

在等待状态中我们将成功的函数 push 到成功状态的回调数组中，将失败函数push 到失败状态的回调数组中

 //将成功的回调push 到 resolveCallback 这个数组中
            this.resolveCallback.push(()=>{
                OnResolve(this.value);
            })
            //将失败的回调 push 到  rejectCallback 这个数组中
            this.rejectCallback.push(()=>{
                OnReject(this.reason);
            })

同时我们将状态的值传递进去

最后在各自的执行函数进行数组的遍历调用自身的函数

  self.resolveCallback.forEach(fn=>fn()); // 发布

猜你喜欢