手写Promise，1.4promise中then方法的链式调用

HeiYanjing - 2021-08-12 18:47:30

promise还有一个很重要的特点，
then方法可以被链式调用，后面一个then方法得到的值是上一个then方法的返回值

实现这个功能，需要两个步骤，第一是实现then方法的链式调用，第二是把上一个then方法回调函数返回值传递给下一个then方法。

then方法属于promise一个属性，而且then方法执行后返回一个promise对象，那么可以在then方法中new一个promise对象，并且返回，这样就可以一直执行then方法。而promise的构造函数接收一个执行器，并且要立即执行，那么将原有的then方法中的代码放入到执行器中就可以实现这个要求。

而在执行器中的代码逻辑也需要修改，成功和失败状态中都需要判断返回值类型，如果是普通值，就可以立即执行，传递给下一个promise对象，如果是promise对象，需要查看他的状态，并传递给下一个promise对象。

处理返回值类型公用方法

function resolvePromise(e, resolve, reject) {
    if (e instanceof MyPromise) {
        // promise对象
        // e.then((value) => {
        //     resolve(value)
        // }, (reason) => {
        //     reject(reason)
        // })
        // 简化代码
        e.then(resolve, reject);
    } else {
        //普通值
        resolve(e);
    }
}

then方法修改

    then(successCallback, failedCallback) {
        let promise2 = new Promise((resolve, reject) => {
            // 状态判断
            if (this.status === FULFILLED) {
                // 定义成功回调返回值，传给下一个then的成功回调
                let successRtn = successCallback(this.value);
                // 判断successRtn 的值是普通值还是promise对象
                // 如果是普通值，直接调用resolve 
                // 如果是promise对象，查看promsie对象返回的结果 
                // 再根据promise对象返回的结果，决定调用resolve 还是调用reject
                // 执行resolve方法，相当于把返回值传递给下一个then的成功回调函数
                resolvePromise(successRtn, resolve, reject);
            } else if (this.status === REJECTED) {
                let failedRtn = failedCallback(this.reason);
                resolvePromise(failedRtn, resolve, reject);
            } else {
                // 等待，需要将成功回调和失败回调存储起来，等待需要执行的时候才执行
                this.successCallback.push(successCallback);
                this.failedCallback.push(failedCallback);
            }
        });
        return promise2;
    }

测试代码

let promise = new MyPromise((resolve, reject) => {
    resolve('---success----');
    // setTimeout(()=>{
    //     resolve('success')
    // },3000)
    // reject("---failed----");
})

function other() {
    return new MyPromise((resolve, reject) => {
        resolve("a  promise object")
    })
}
promise.then(value => {
    console.log(value);
    return other();
}, reason => {
    console.log(reason)
}).then(value => {
    console.log(value)
})

测试打印