我自己写了一个promise,但是实现后和ES6的的效果还有差别,麻烦各位帮我看一下是哪里出了问题吗?

照着网上的文章自己实现了一个Promise,这是代码
function myPromise(passedInFunction) {
    var self = this;
    this.pending = "pending"; // 初始状态
    this.fulfilled = "fulfilled"; // 完成态
    this.rejected = "rejected" // 失败态
    this.status = this.pending; // 初始化初始状态
    this.value = null; // 用于存储完成状态下需要传递的值
    this.error = null; // 用于存储失败状态下需要传递的值
    this.onFulfilledFnArr = []; // 存放完成态后方法的数组
    this.onRejectedFnArr = []; // 存放失败态后方法的数组

    function resolve(successValue) {
        if (self.status == self.pending) { // 如果不是初始状态的话就不能传递值和修改状态
            self.value = successValue; // 存储成功状态下的值
            self.status = self.fulfilled; // 修改状态为完成态
            self.onFulfilledFnArr.forEach(function (fulfilledFn) {
                fulfilledFn(self.value);
            })
        }
    }

    function reject(errorValue) {
        if (self.status == self.pending) {
            self.error = errorValue;
            self.status = self.rejected;
            self.onRejectedFnArr.forEach(function (rejectedFn) {
                rejectedFn(self.error);
            })
        }
    }

    passedInFunction(resolve, reject);
}

myPromise.prototype.then = function (successCallback, errorCallBack) {
    var self = this;

    successCallback = typeof (successCallback) == "function" ? successCallback : function (successValue) {};
    errorCallBack = typeof (errorCallBack) == "function" ? errorCallBack : function (errorInfo) {};

    if (self.status == self.fulfilled) { // 如果当前状态为完成态时
        return Promise2 = new myPromise(function (resolve, reject) { // 如果要链式操作的话这部是必须的
            setTimeout(function () { // 将successCallback放到下一次事件循环中
                try {
                    var p2Res = successCallback(self.value);// 取的successCallback的返回值
                    if (p2Res instanceof myPromise) {// 如果返回值也是一个myPromise的实例
                        p2Res.then(resolve, reject);// 那么就继续判断这个对象的状态并持续下去
                    }
                    resolve(p2Res.value);// 如果不是myPromise的实例的话就直接修改档当前状态,结束
                } catch (error) {
                    reject(error);
                }
            })
        })
    }
    
    if (self.status == self.rejected){
        return Promise2 = new myPromise(function(resolve,reject){
            setTimeout(function(){
                try {
                    var p2Res = errorCallBack(self.error);
                    if(p2Res instanceof myPromise){
                        p2Res.then(resolve,reject);
                    }
                } catch (error) {
                    reject(error);
                }
            })
        })
    }
    // 如果当前状态为pending时,我们就不知道到底是要执行successCallback还是errorCallBack,所以只能将这两个回调函数分别添加到上一个myPromise实例的对应回调函数数组里,供以后状态改变了之后调用
    if(self.status == self.pending){
        return Promise2 = new myPromise(function(resolve,reject){
            setTimeout(function(){
                self.onFulfilledFnArr.push(function(value){
                    try {
                        var p2Res = successCallback(self.value);
                        if (p2Res instanceof myPromise) {
                            p2Res.then(resolve, reject);
                        }
                        resolve(p2Res.value);
                    } catch (error) {
                        reject(error);
                    }
                })
                
                self.onRejectedFnArr.push(function(value){
                    try {
                        var p2Res = errorCallBack(self.error);
                        if(p2Res instanceof myPromise){
                            p2Res.then(resolve,reject);
                        }
                    } catch (error) {
                        reject(error);
                    }
                })
            })
        })
    }
}

写完后我自己用了一下:

var pro = new myPromise(function(resolve,reject){
            console.log(1);
            resolve(2);
        });
        
        // console.log(pro);

        pro.then(function(value){
            console.log(value);
            return new myPromise(function(resolve,reject){
                console.log(3);
                resolve(4);
            })
        }).then(function(value){
            console.log(value);
        })
        
        console.log(5);

但是最后执行结果却并没有像ES6Promise那样吧4打印出来。
image.png
大佬帮我看一下吧。

阅读 923
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题