Promise源码解密-then的链式调用

then的用法

1. 通过return 给下一个then传值，成功/失败的返回值，最后都是传到下一个then的成功会回调

   let t = new Promise((resolve, reject) => {
       console.log(a)  // 执行console会报错，最终只会执行reject
   })
   t.then((res)=>{
       return res
   },error=>{
       return error
   }).then(
     (res) => {
       console.log(res.toString(),'res===='); // ReferenceError: a is not defined res====
     },
     (error) => {
       console.log(error);
     }
   );
   

2. then中的onFulfilled/onReject 是可选的, 下面的例子，第一个then没有return值，但是第二个then也可以接受到值，最终输出 then 回调可选。

   let t = new Promise((resolve, reject) => {
       resolve('then 回调可选')
   })
   t.then().then(
     (res) => {
       console.log(res);
     },
     (error) => {
       console.log(error);
     }
   );
   

3. 实例不可 循环引用，报错 : Chaining cycle detected for promise #<Promise>

let p = new Promise((resolve, reject) => {
    resolve('不可循环引用')
})
var p2=p.then(()=>{
   return p2 // 返回的值还是p2
})

完整代码

// 定义状态常量
const STATUS_PENDING = "pending";
const STATUS_FULFILLED = "fulfilled";
const STATUS_REJECTED = "rejected";

function resolvePromise(promise2, x, resolve, reject) {
    // 用来保存是否已经reject或者resolve过
    let called
    if (promise2 === x) {
        throw new TypeError('Chaining cycle detected for promise')
    }
    // 如果是函数或者object的话先默认是promise
    if (x != null && (typeof x === 'object' || typeof x === 'function')) {
        try {
            let then = x.then
            // 如果then是函数的话
            if (typeof then === 'function') {
                // 为啥不直接x.then()
                // 因为then已经判断过是不是function，但是x.then没有判断过
                // 就让then执行 第一个参数是this   后面是成功的回调 和 失败的回调

                //  这里的y是啥，如果x是promsie的话,那么y就是x中的resolve/reject的值
                then.call(x, y => {
                    // 成功和失败只能调用一个

                    if (called) return;
                    called = true;
                    console.log(y, 'yyyyyyyyyyyy')

                    // resolve的结果依旧是promise 那就继续解析
                    resolvePromise(promise2, y, resolve, reject);
                }, err => {
                    // 成功和失败只能调用一个

                    if (called) return;
                    called = true;
                    reject(err);
                })
            } else {

                resolve(x); // 如果不是函数，那就直接返回结果
            }
        } catch (error) {
            // 成功和失败只能调用一个

            if (called) return;
            called = true;
            // 没有then 不是函数也不是普通值
            reject(error)
        }
    } else {
        // x 是一个普通值
        resolve(x)
    }
}
class MyPromise {
    // 接收一个 执行器
    // new Promise的时候，执行器立即执行，
    // 执行的时候根据指定函数执行
    // 并且程序报错的情况下
    constructor(executor) {
        this.status = STATUS_PENDING;
        this.value = undefined;
        this.reason = undefined;

        // 这里的两个数据，相当于订阅者的篮子，then相当于订阅者，接收到发布者的函数，保存在篮子里
        this.onFulfilledCallBacks = [];
        this.onRejectCallBacks = [];
        try {
            // 这里将传入的resolve和reject变为类中的调用的话。
            // (resolve, reject) => {
            //     resolve("then链式调用");=>this.resolve(then链式调用)
            // }

            executor(this.resolve, this.reject);
        } catch (error) {
            //  报错的话直接将错误原因作为reason
            this.reject(error);
        }
    }
    // 这里为啥使用箭头函数而不是resolve(){}
    // 这是因为上面的executor调用的时候，resolve中的this其实是undefined
    // executor单独调用了resolve/reject 这时，这两个方法存在于执行是的环境，this不再指向实例
    // 箭头函数内部的this总是指向定义时所在的对象
    resolve = (value) => {
        // 判断状态是不是
        if (this.status === STATUS_PENDING) {
            console.log("执行resolve");
            // 这里接收传进来的结果
            this.value = value;
            this.status = STATUS_FULFILLED;
            this.onFulfilledCallBacks.forEach((fn) => {
                fn();
            });
        }
    };
    reject = (reason) => {
        if (this.status === STATUS_PENDING) {
            console.log("执行reject");
            // 这里接收传进来的错误的结果
            this.reason = reason;
            this.status = STATUS_REJECTED;
            // 这里相当于发布的动作
            this.onRejectCallBacks.forEach((fn) => {
                fn();
            });
        }
    };

    then(onFulfilled, onReject) {
        onFulfilled =
            typeof onFulfilled === "function" ? onFulfilled : (value) => value;
        onReject = typeof onReject === "function" ? onReject : (reason) => reason;
        console.log("执行then时的状态: ", this.status);
        let promise2 = new MyPromise((resolve, reject) => {
            if (this.status === STATUS_FULFILLED) {
                // 这个地方使用settimeout的目的是获取到promise2。因为setTimeout是异步的，
                // 会等到赋值给promise2结束后才执行，
                // 这里的resolvePromise的作用是为了区分x是普通值还是新的promise还是函数
                // 如果直接resolve（x）的话会导致，输出的是[object Object] res====，并不是想要的值
                setTimeout(() => {
                    // 这里try进行了捕获异常，在最外面的executor不是进行了捕获了？
                    // 这是因为异步里面的方法不会被最外层的那个捕获到
                    try {
                        console.log("执行 onFulfilled");
                        //   这里的x是啥？ 是then中回调的return的返回值
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === STATUS_REJECTED) {
                setTimeout(() => {
                    try {
                        console.log("执行 onReject");
                        let x = onReject(this.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                }, 0);
            }
            if (this.status === STATUS_PENDING) {
                this.onFulfilledCallBacks.push(() =>
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0)
                );
                this.onRejectCallBacks.push(() =>
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.reason);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (e) {
                            reject(e);
                        }
                    }, 0)
                );
            }
        });

        return promise2;
    }
}

// 下面的函数相当于发布者
let t = new MyPromise((resolve, reject) => {
    // 指定执行哪个，resolve和reject最终只会执行一个
    // console.log(a)  // 执行console会报错，最终只会执行reject
    // // resolve("res")
    // reject('reject')
    // setTimeout(() => {
    resolve("then链式调用");
    // }, 1000)
});
t.then(() => {
    return new MyPromise((resolve) => {
        console.log(2);
        setTimeout(() => {
            resolve(3);
        }, 3000);
    });
}).then(
    (res) => {
        console.log(res.toString(), "res====");
    },
    (error) => {
        console.log(error);
    }
);