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

发布于 2022-09-12 02:19:21 字数 4412 浏览 23 评论 0

照着网上的文章自己实现了一个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
大佬帮我看一下吧。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文