promise

作者: 超超超喜欢大河 | 来源:发表于2020-04-21 16:22 被阅读0次
// var first = new Promise(function (resolve,reject) {
//     reject("reject");
//     resolve("resolve");
// });
// first.then(function (value) {
//    console.log(value);
// },function (value) {
//     console.log(value);
// });

var log = console.log;

//模仿Promise做一个  最初版本,只运行成功,不运行失败
function Mock_Promise(excutor) {
    let self = this;
    self.excutor = excutor;
    self.status = "pending";
    self.value = null;
    self.reason = null;
    self.resolve = resolve;
    self.reject = reject;

    //用来运行resolve函数
    function resolve(value) {
        self.status = "resolved";
        self.value = value;
    }

    function reject(reason) {
        self.status = "fulfilled";
        self.reason = reason;
    }
    if (Mock_Promise.prototype.flagOfNew === "new") {
        self.excutor(self.resolve)
    }
    // self.excutor(self.resolve);
}
//使用一个类级别的标志位,用来识别new的时候到底是在then里面new的还是在外面new的
Mock_Promise.prototype.flagOfNew = "new";
Mock_Promise.prototype.then = function (resolved,rejected) {
    let self = this;
    if(this.status !== "pending"){
        if(this.status === "resolved"){
            resolved(this.value);
        }else if(this.status === "fulfilled"){
            rejected(this.reason);
        }
    }else {
        setTimeout(function () {
            self.then(resolved);
        });
    }
    //返回的是then里面的函数的Mock_Promise实例
    //这样有个问题,就是Mock_Promise里面的又会运行一次,理论上不应该的
    Mock_Promise.prototype.flagOfNew = "then";
    let temp = new Mock_Promise(resolved);
    Mock_Promise.prototype.flagOfNew = "new";
    return temp
};
// var x = new Mock_Promise(function (resolve) {
//     setTimeout(function () {
//         resolve("abc");
//     })
// });
// x.then(function (value) {
//     log("123");
//     log(value);
// }).then(function () {
//     log("456");
// });



function promise_jue(excutor) {
    let self = this;
    self.status = "pending";
    self.value = null;
    self.reason = null;
    // self.onResolvedCallbacks = [];
    // self.onRejectedCallbacks = [];
    function resolve(value) {
        debugger
        if(self.status === "pending"){
            self.value = value;
            self.status = "fulfilled";
            // self.onResolvedCallbacks.forEach(function (fn) {
            //     fn();
            // })
        }
    }
    function reject(reason) {
        if(self.status === "pending"){
            self.reason = reason;
            self.status = "rejected";
            // self.onRejectedCallbacks.forEach(function (fn) {
            //     fn();
            // })
        }
    }
    try {
        excutor(resolve,reject);
    }catch (e) {
        reject(e)
    }
    console.log("why")
}
promise_jue.prototype.then = function (onFulfilled,onRejected) {
        let self = this;
        switch (self.status) {
            case "fulfilled":
                onFulfilled(self.value);
                break;
            case "rejected":
                onRejected(self.reason);
                break;
            // case "pending":
            //     self.onResolvedCallbacks.push(function () {
            //         onFulfilled(self.value);
            //     });
            //     self.onRejectedCallbacks.push(function () {
            //         onRejected(self.reason);
            //     });
            //     break;
        }
};
//这里会出现异步调用的线程问题
function a(resolved,rejected){
    log("a");
    setTimeout(function (){resolved("abc");});
    // resolved("abc");
    // rejected("def");
}
// let test = new promise_jue(a);
// test.then(b,c);
//
// function b(value) {
//     console.log(value+"---function b");
// }
// function c(value) {
//     console.log(value+"----function c");
// }


//函数传参测试f
//
// function f_1(f_2) {
//     log(f_2);
//     f_2();
// }
// function f_2(f_3) {
//     log("666");
//     log(f_3);
// }
// f_1(f_2);

//掘金代码
function MyPromise(excutor) {
    let self = this;
    self.value = undefined;
    self.reason = undefined;
    //默认promise状态是pending
    self.status = "pending";
    //用来保存then方法中,第一个参数
    self.onResovledCallbacks = [];
    //用来保存then方法中,第二个参数
    self.onRejectedCallbacks = [];
    function resolve(value) {
        debugger
        if(self.status === "pending"){
            //保证状态一旦变更,不能再次修改
            self.value = value;
            self.status = "resolved";
            self.onResovledCallbacks.forEach(fn=>fn());
        }
    }
    function reject(reason) {
        if(self.status === "pending"){
            //保证状态一旦变更,不能再次修改
            self.value = reason;
            self.status = "rejected";//失败
            self.onRejectedCallbacks.forEach(fn=>fn());
        }
    }
    excutor(resolve,reject);//原版的也会直接执行这个函数
}

//添加then方法
MyPromise.prototype.then = function (onFulfilled,onRejected) {
    debugger
    let self = this;
    log(self.value);
    switch (self.status) {
        case "resolved":
            onFulfilled(self.value);
            break;
        case "rejected":
            onRejected(self.reason);
            break;
        case "pending":
            self.onResovledCallbacks.push(function () {
                onFulfilled(self.value);
            });
            self.onRejectedCallbacks.push(function () {
                onRejected(self.reason)
            });
            break;
    }
};

let p = new MyPromise(function (resolve,reject) {
    debugger
    log("start");
    setTimeout(function () {
        resolve("data");
    })
});
p.then(function (value) {
    log("success"+value)
});
class fake_Promise {
    //要的就是状态,具体是多少无所谓的,拥抱新技术~
    //ES6 中规定,Class 内部只有静态方法,没有静态属性。但是可以用,新提案中有
    static PENDDING = Symbol("pending");
    static RESOLVED = Symbol("resolved");
    static REJECTED = Symbol("rejected");

    constructor(excutor) {
        this.status = fake_Promise.PENDDING;
        this.value = null;
        this.reason = null;
        //回调函数队列
        this.resolvedCallback = [];
        this.rejectedCallback = [];
        //当传进来的excutor不是函数的时候,创建一个匿名函数
        excutor = excutor || function () {
        };
        excutor(this.resolve.bind(this), this.reject.bind(this));
    }

    resolve(value) {
        //状态只允许改变一次
        if (this.status === fake_Promise.PENDDING) {
            this.status = fake_Promise.RESOLVED;
            this.value = value;
            this.resolvedCallback.forEach(fn => fn(this.value));
        }

    }

    reject(reason) {
        if (this.status === fake_Promise.PENDDING) {
            this.status = fake_Promise.REJECTED;
            this.reason = reason;
            this.rejectedCallback.forEach(fn => fn(this.reason));
        }
    }

    //then函数有两个参数,一个是成功时候执行的,一个是失败时候执行的,两个都是函数
    then(onFulfilled, onRejected) {
        if(typeof onFulfilled !== "function"){
            onFulfilled = ()=>{};
        }
        if(typeof onRejected !== "function"){
            onRejected = ()=>{};
        }
        return new fake_Promise((resolve,reject)=>{
            try {
                let value = undefined;
                //判断实例status的状态,暂时不加别的状态
                switch (this.status) {
                    case fake_Promise.RESOLVED:
                        value = onFulfilled(this.value);
                        resolve(value);
                        break;
                    case fake_Promise.REJECTED:
                        value = onRejected(this.reason);
                        resolve(value);
                        break;
                    //遇到PENDDING的情况就是异步了,使用回调函数队列
                    case fake_Promise.PENDDING:
                        this.resolvedCallback.push(result => onFulfilled(result));
                        this.rejectedCallback.push(result =>onRejected(result));
                        break;
                }
            //如果要实现链式调用,return一个fake_Promise的实例,其实就是这么简单
            //主要是这里面填什么,
            //目前这样的写法不支持异步,一会再解决异步的问题
            } catch (e) {
                reject();
            }

        })
    }
}

let p = new fake_Promise(function (resolve, reject) {
    setTimeout(function () {
        resolve("resolved--p--my");
    });
    // resolve("resolved--p--my");
    console.log("new fake_promise");
})
    .then(function (value) {
        console.log(value + "new fake_promise 第二层");
        return "123"
    })
    .then(value => console.log(value + "zuihou"));


//因为现在没有trycatch,所以连续调用then只能调用成功

// let p = new fake_Promise(function (resolve) {
//     setTimeout(function () {
//         resolve("resolved--p--my");
//     });
//     console.log("new fake_promise");
// }).then(value=>console.log(value))
//     .then(value=>console.log(value+"zuihou"));

// console.log(p+"---p");

//为什么p会是undefined呢,因为什么都没返回。那么,我们希望then返回什么呢
//第一,是个promise对象,这是一定的。
//第二,exuctor参数是什么,

// let d = new Promise(function (resolve) {
//     setTimeout(function () {
//         resolve("resolved--p--yuans");
//     });
//     console.log("new fake_promise");
// }).then(value=>{console.log(value+"dangzhong");return value}).then(value => console.log(value+"zuihou"));


// console.log("_______________________________________________________________");
//
// let d = new Promise(function (resolve) {
//     setTimeout(function () {
//         resolve("resolved--p--yuans");
//     });
//     console.log("new fake_promise");
// }).then(value=>console.log(value));

相关文章

网友评论

      本文标题:promise

      本文链接:https://www.haomeiwen.com/subject/rbfpihtx.html