Promise的模擬實現(xiàn)

結(jié)構(gòu)

promise經(jīng)常使用的方法類似下邊這樣：

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

從這個例子看來promise是作為構(gòu)造函數(shù)使用，參數(shù)是一個function（暫且稱為executor），通過調(diào)用then設(shè)置成功或者失敗的回調(diào)函數(shù)，所以MyPromise的基本結(jié)構(gòu)如下：

const MyPromise = function (executor) {
}
MyPromise.prototype.then=function () {}

模擬promise基本功能

繼續(xù)上邊的例子，我們來看看promise主要的工作流程：

var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

從上邊例子可以看出promise通過then方法注冊成功和失敗的回調(diào)函數(shù)，然后在executor中通過resolve和reject給成功和失敗的回調(diào)函數(shù)傳遞參數(shù)评抚，然后調(diào)用。
下邊就是模擬promsie的代碼：

STATUS = {
    SUCCESS: 'SUCCESS',
    FAIL: 'FAIL',
    PENDING: 'PENDING'
};

const MyPromise = function (executor) {
    this.status = STATUS.PENDING; // 存儲當(dāng)前promise狀態(tài)
    this.onFulfilled = Function.prototype; // 存儲成功的回調(diào)函數(shù)
    this.onRejected = Function.prototype; // 存儲失敗的回調(diào)函數(shù)
    this.value = '';
    this.error = '';
const resolve = (value) => {
        if (value instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.SUCCESS;
                this.value = value;
                this.onFulfilled(this.value);
            }
        }, 20)
    };

    const reject = (error) => {
        if (error instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.FAIL;
                this.error = error;
                this.onRejected(this.error);
            }
        }, 20)
    };
try {
 executor(resolve, reject)
} catch(e) {
 reject(e)
}
};

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    if (this.status === STATUS.SUCCESS) {
        this.onFulfilled(this.value)
    } else if (this.status === STATUS.FAIL) {
        this.onRejected(this.error);
    } else if (this.status === STATUS.PENDING) {
        this.onFulfilled = onFulfilled;
        this.onRejected = onRejected;
    }
};

在構(gòu)造函數(shù)中設(shè)置resolve和reject方法伯复，當(dāng)調(diào)用這兩個方法會將參數(shù)存在對象中供成功或者失敗回調(diào)函數(shù)調(diào)用慨代，resolve會將值存在value中，reject會將值存在error中啸如，然后調(diào)用對應(yīng)狀態(tài)的回調(diào)函數(shù)侍匙。

在then方法中進行判斷：

  1. 如果promise處于pending狀態(tài)就給promise注冊回調(diào)函數(shù)
  2. 如果成功或者失敗則直接調(diào)用回調(diào)函數(shù)將promise中的value或者error傳過去。

這塊注意點：

  1. resolve和reject函數(shù)中使用了setTimeout叮雳，作用是確保調(diào)用的時候回調(diào)函數(shù)已經(jīng)掛載在對象上了
  2. resolve和reject函數(shù)中加入了狀態(tài)判斷是因為promise在狀態(tài)一旦進入失敗或者成功后狀態(tài)就不可更改了想暗。

完善promise多次掛載

promise允許多次掛載例如下邊這種情況：

let promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('data')
    }, 2000)
})

promise.then(data => {
    console.log(`1: ${data}`)
})
promise.then(data => {
    console.log(`2: ${data}`)
})

promise通過then方法掛載了兩個成功回調(diào)函數(shù)，按照上邊的方法并不能完成這個需求帘不，所以加了一些修改：

STATUS = {
    SUCCESS: 'SUCCESS',
    FAIL: 'FAIL',
    PENDING: 'PENDING'
};

const MyPromise = function (executor) {
    this.status = STATUS.PENDING;
    // 將回調(diào)函數(shù)改為一個數(shù)組
    this.onFulfilledArray = [];
    this.onRejectedArray = [];
    this.value = '';
    this.error = '';
    const resolve = (value) => {
        if (value instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.SUCCESS;
                this.value = value;
                this.onFulfilledArray.forEach((func) => {
                    func(this.value);
                });
            }
        }, 20)
    };

    const reject = (error) => {
        if (error instanceof MyPromise) {
            return MyPromise.then(resolve, reject)
        }
        setTimeout(() => {
            if (this.status === STATUS.PENDING) {
                this.status = STATUS.FAIL;
                this.error = error;
                this.onRejectedArray.forEach((func) => {
                    func(this.error);
                });
            }
        }, 20)
    };
    try {
        executor(resolve, reject)
    } catch(e) {
        reject(e)
    }
};

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    if (this.status === STATUS.SUCCESS) {
        onFulfilled(this.value);
    } else if (this.status === STATUS.FAIL) {
        onRejected(this.error);
    }else if (this.status === STATUS.PENDING) {
        this.onFulfilledArray.push(onFulfilled);
        this.onRejectedArray.push(onRejected);
    }
};

promise去掉成功或者失敗回調(diào)函數(shù)存儲说莫，改為使用數(shù)組存儲成功和失敗的回調(diào)，然后寞焙，在then函數(shù)中如果promise狀態(tài)是pending就將回調(diào)函數(shù)加入數(shù)組中存儲下储狭，接著修改了resolve和reject方法告唆，不是直接調(diào)用回調(diào)函數(shù)然后穿參而是遍歷回調(diào)函數(shù)數(shù)組依次執(zhí)行。

鏈?zhǔn)秸{(diào)用

promise的then是支持鏈?zhǔn)秸{(diào)用的晶密，then方法依然會返回promise，就像下邊這樣：

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('lucas')
    }, 2000)
})

promise.then(data => {
    console.log(data)
    return `${data} next then`
})
    .then(data => {
        console.log(data) // lucas next then
    })

因此代碼還需要進一步完善,then要返回promise模她，then方法修改為如下：

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) =>{ throw error};
    let promise = null;
    if (this.status === STATUS.SUCCESS) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => { // 保持resolve操作在then后邊
                try {
                    resolve(onFulfilled(this.value));
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.FAIL) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {
                    resolve(onRejected(this.error));
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.PENDING) {
        promise = new MyPromise((resolve, reject) => {
            this.onFulfilledArray.push((value) => {
                try {
                    resolve(onFulfilled(value)); 
                } catch (e) {
                    reject(e);
                }
            });
            this.onRejectedArray.push((error) => {
                try {
                    reject(onRejected(error));
                } catch (e) {
                    reject(e);
                }
            });
        });
        return promise;
    }
};

難點在于pending狀態(tài)下的處理稻艰，這里使用了閉包的思想，在給回調(diào)函數(shù)緩存數(shù)組中存入回調(diào)函數(shù)的時候侈净，閉包會存下promise返回值的resolve和reject方法與then方法的兩個回調(diào)函數(shù)尊勿，這樣在promise的resolve與reject方法調(diào)用回調(diào)函數(shù)的時候，會從閉包中取出對應(yīng)的內(nèi)容畜侦，完成功能元扔。

鏈?zhǔn)秸{(diào)用處理then方法直接返回promise的情況

上邊的例子中沒有處理then方法回調(diào)函數(shù)如果直接返回一個promise的情況，例子如下：

const promise = new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('lucas')
    }, 2000)
})

promise.then(data => {
    console.log(data)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`${data} next then`)
        }, 4000)
    })
})
    .then(data => {
        console.log(data)
    })

這種情況在promise中會解構(gòu)promise返回旋膳，所以上邊代碼需要進行處理澎语，加入對于返回值是promise的解構(gòu)處理。
then方法修改為下邊這樣：

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (data) => data;
    onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error};
    let promise = null;
    if (this.status === STATUS.SUCCESS) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => { // 保持resolve操作在then后邊
                try {
                    resolvePromiseResult(promise, onFulfilled(this.value), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.FAIL) {
        promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {
                    resolvePromiseResult(promise, onRejected(this.error), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })

        });
        return promise;
    } else if (this.status === STATUS.PENDING) {
        promise = new MyPromise((resolve, reject) => {
            this.onFulfilledArray.push((value) => {
                try {
                    resolvePromiseResult(promise, onFulfilled(value), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
            this.onRejectedArray.push((error) => {
                try {
                    resolvePromiseResult(promise, onRejected(error), resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
        });
        return promise;
    }
};

這里添加了一個方法將promise和返回值與resolve和reject作為參數(shù)傳遞了進去验懊，在方法內(nèi)部進行處理擅羞。
添加方法的完整代碼如下：

function resolvePromiseResult(promise, result, resolve, reject) {
    if (result instanceof MyPromise) {
        if (result.status === STATUS.PENDING) {
            result.then((data) => {
                resolvePromiseResult(promise, data, resolve, reject);
            }, reject)
        } else {
            result.then(resolve, reject);
        }
        return;
    }

    const isComplexObject = (typeof result === 'function' || typeof result === 'object') && result !== null;
    if (isComplexObject) {
        try {
            const thenable = result.then;
            if (typeof thenable === 'function') {
                thenable.call(result, (data) => {
                    return resolvePromiseResult(promise, data, resolve, reject);
                }, (error) => {
                    return reject(error);
                })
            } else {
                resolve(result);
            }
        } catch (e) {
           return reject(e);
        }
    } else {
        resolve(result);
    }
}

代碼重點如下：

  1. 首先對與result是promise進行處理，當(dāng)promise是pending狀態(tài)义图，進行遞歸調(diào)用减俏，如果是success后者fail狀態(tài)直接改變promise狀態(tài)傳遞給resolve與reject函數(shù)回調(diào)。
    2.針對result如果是類promise處理碱工，與promise對象一樣的處理方式

promise 靜態(tài)方法實現(xiàn)

catch

catch方法很簡單

MyPromise.prototype.catch = function(catchFunc) {
   return this.then(null, catchFunc)
}

成功的情況我們不處理只處理錯誤的情況

Promise.resolve與Promise.reject模擬

resolve與reject靜態(tài)方法也很簡單就是返回一個給定值的promise

MyPromise.resolve = function (value) {
    return new MyPromise((resolve, reject) => {
        resolve(value)
    })
};

MyPromise.reject = function (value) {
    return new MyPromise((resolve, reject) => {
        reject(value)
    })
};

Promise.all與 Promise.race模擬

promise的all方法是用來處理多個promise的方法娃承，參數(shù)是個promise數(shù)組，當(dāng)所有promise完成后會返回一個數(shù)組怕篷，存儲每個promise的返回結(jié)果历筝，模擬代碼也很簡單，如下：

MyPromise.all = function (promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new Error('The arguments should be an array!')
    }
    return new MyPromise((resolve, reject) => {
            try {
                let resultArray = [];

                const length = promiseArray.length;

                for (let i = 0; i < length; i++) {
                    promiseArray[i].then(data => {
                        resultArray.push(data);

                        if (resultArray.length === length) {
                            resolve(resultArray)
                        }
                    }, reject)
                }
            } catch (e) {
                reject(e)
            }
        }
    )
}

race方法是當(dāng)?shù)谝粋€promsie返回后就返回結(jié)果廊谓，參數(shù)也是一個promise數(shù)組漫谷，實現(xiàn)方法也非常簡單，代碼如下：

MyPromise.race = function (promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new TypeError('The arguments should be an array!')
    }
    return new MyPromise((resolve, reject) => {
        try {
            const length = promiseArray.length
            for (let i = 0; i < length; i++) {
                promiseArray[i].then(resolve, reject)
            }
        } catch (e) {
            reject(e)
        }
    })
}

道理也很簡單就是在第一個promsie響應(yīng)的時候就返回結(jié)果終止訂閱蹂析。

結(jié)束語

本篇文章嘗試模擬一個promise舔示，借此來深入理解下這個js常用且很重要的功能，分享出來希望可以幫助和我一樣的前端小白电抚，很多地方實現(xiàn)可能不夠嚴(yán)謹(jǐn)惕稻，或者可能存在錯誤，歡迎大家指正蝙叛。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末俺祠，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蜘渣，老刑警劉巖淌铐，帶你破解...
    沈念sama閱讀 219,366評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異蔫缸，居然都是意外死亡腿准，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門拾碌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來吐葱，“玉大人，你說我怎么就攤上這事校翔〉芘埽” “怎么了？”我有些...
    開封第一講書人閱讀 165,689評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵防症，是天一觀的道長孟辑。 經(jīng)常有香客問我，道長蔫敲，這世上最難降的妖魔是什么扑浸？ 我笑而不...
    開封第一講書人閱讀 58,925評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮燕偶，結(jié)果婚禮上喝噪，老公的妹妹穿的比我還像新娘。我一直安慰自己指么，他們只是感情好酝惧，可當(dāng)我...
    茶點故事閱讀 67,942評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著伯诬，像睡著了一般晚唇。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上盗似，一...
    開封第一講書人閱讀 51,727評論 1贊 305
  • 城市分裂傳說
    那天哩陕，我揣著相機與錄音，去河邊找鬼赫舒。 笑死悍及，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的接癌。 我是一名探鬼主播心赶，決...
    沈念sama閱讀 40,447評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼缺猛！你這毒婦竟也來了缨叫？” 一聲冷哼從身側(cè)響起椭符，我...
    開封第一講書人閱讀 39,349評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎耻姥，沒想到半個月后销钝，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,820評論 1贊 317
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡琐簇，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年蒸健，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸽嫂。...
    茶點故事閱讀 40,127評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖征讲，靈堂內(nèi)的尸體忽然破棺而出据某，到底是詐尸還是另有隱情，我是刑警寧澤诗箍，帶...
    沈念sama閱讀 35,812評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布癣籽，位于F島的核電站，受9級特大地震影響滤祖，放射性物質(zhì)發(fā)生泄漏筷狼。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一匠童、第九天 我趴在偏房一處隱蔽的房頂上張望埂材。 院中可真熱鬧，春花似錦汤求、人聲如沸俏险。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0贊 22
  • 一樁弒父案扬绪，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽竖独。三九已至，卻和暖如春挤牛，著一層夾襖步出監(jiān)牢的瞬間莹痢，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工墓赴， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留竞膳，地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3贊 373
  • 代替公主和親
    正文 我出身青樓诫硕，卻偏偏與公主長得像顶猜，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子痘括，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2贊 355