Promise 實現原理（二）—— Promise 鏈式調用

上節代碼

//極簡的實現+鏈式調用+延遲機制+狀態
class Promise {
    callbacks = [];
    state = 'pending';//增加狀態
    value = null;//保存結果
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        if (this.state === 'pending') {//在resolve之前，跟之前邏輯一樣，添加到callbacks中
            this.callbacks.push(onFulfilled);
        } else {//在resolve之后，直接執行回調，返回結果了
            onFulfilled(this.value);
        }
        return this;
    }
    _resolve(value) {
        this.state = 'fulfilled';//改變狀態
        this.value = value;//保存結果
        this.callbacks.forEach(fn => fn(value));
    }
}

但鏈式調用，只是在 then 方法中 return 了 this，使得 Promise 實例可以多次調用 then 方法，但因為是同一個實例，調用再多次 then 也只能返回相同的一個結果，通常我們希望的鏈式調用是這樣的：

//使用Promise
function getUserId(url) {
    return new Promise(function (resolve) {
        //異步請求
        http.get(url, function (id) {
            resolve(id)
        })
    })
}
getUserId('some_url').then(function (id) {
    //do something
    return getNameById(id);
}).then(function (name) {
    //do something
    return getCourseByName(name);
}).then(function (course) {
    //do something
    return getCourseDetailByCourse(course);
}).then(function (courseDetail) {
    //do something
});

每個 then 注冊的 onFulfilled 都返回了不同的結果，層層遞進，很明顯在 then 方法中 return this 不能達到這個效果。引入真正的鏈式調用，then 返回的一定是一個新的Promise實例。

我們希望  上面的每個 do something 都是一個新的 promise 實例，（resolve的值都是第一個） 而不是第一個 promise 實例。