Promise源碼解析

紙上得來終覺淺，絕知此事要躬行。之前只是很淺顯的知道Promise的用法，也大概猜測到它的內部是如何實現(xiàn)的。但是總是有一種不深究一下就不踏實的感覺。于是從npm上獲得早期的Promise源代碼，拿過來讀一讀，做一做筆記。

Promise的源碼寫的非常的巧妙，憑空閱讀會陷入入其中無法自拔。

簡單的Promise用法

一個簡單的Promise用法如下：

const promiseObj = new Promise(function (resolve, reject) {// 代碼執(zhí)行resolve('value');//orreject('error'); }); promiseObj.then(function (value) {// do sth... }, function (error) {// deal excption... }); promiseObj.catch(function (error) { // catch excption... });

我們就從這個簡單的例子開始分析Promise的執(zhí)行是怎么樣的。

Promise的源代碼位于：https://github.com/stefanpenner/es6-promise.git ,這里采用的版本為0.1.0版本。

我們從Promise的構造函數(shù)開始說起：

function Promise(resolver) {... // 省略的部分為必要的校驗this._subscribers = [];invokeResolver(resolver, this); }

_subscribers對象用于存儲這個Promise實例所對應的觀察者。緊接著執(zhí)行invokeResolver();

function invokeResolver(resolver, promise) {function resolvePromise(value) {resolve(promise, value); // p2, p1}function rejectPromise(reason) {reject(promise, reason);}try {resolver(resolvePromise, rejectPromise);} catch(e) {rejectPromise(e);} }

invokeResolver為關鍵的一環(huán)。在這里，構造Promise對象時所傳入的方法會被執(zhí)行，并將執(zhí)行方法所需的兩個回調參數(shù)resolvePromise和rejectPromise傳了進去，方便業(yè)務代碼通知Promise對象執(zhí)行結果。

如果我們的代碼很簡單的執(zhí)行了一行代碼，例如：

resolve('Hello');

那么resolvePromise會緊接著調用resolve方法。我們進入resolve方法一探究竟：

function resolve(promise, value) { // promise為新構造的Promise對象，value = 'Hello'.if (promise === value) {fulfill(promise, value);} else if (!handleThenable(promise, value)) {fulfill(promise, value);} }

我們現(xiàn)在的邏輯會直接進入fulfill方法：

function fulfill(promise, value) {// promise為新構造的Promise對象，value = 'Hello'.if (promise._state !== PENDING) { return; } // 當前不滿足，默認為PENDING狀態(tài)promise._state = SEALED;// promise._state = SEALED promise._detail = value;// promise._detail = 'Hello' config.async(publishFulfillment, promise); }

到這里，將結果值賦值給了Promise對象。也就是說Promise對象保留了計算后的結果值’Hello’。然后我們看一下config.async()是個什么鬼：

function asap(callback, arg) {var length = queue.push([callback, arg]);if (length === 1) {// If length is 1, that means that we need to schedule an async flush.// If additional callbacks are queued before the queue is flushed, they// will be processed by this flush that we are scheduling.scheduleFlush();} }

上面這段代碼位于lib/promise/asap.js中。它主要用來將任務callback加入下一個時間片中。執(zhí)行到這里會將[publishFulfillment, promise]組成一個數(shù)組放在隊列中，然后緊接著根據(jù)平臺進行任務刷新，也就是執(zhí)行scheduleFlush();

不過，不管scheduleFlush方法再怎么快，它也是被放在了所有事件最后才執(zhí)行。所以接下來執(zhí)行的代碼是主線程繼續(xù)執(zhí)行的代碼：

promiseObj.then(function (value) {// do sth... }, function (error) {// deal excption... }); promiseObj.catch(function (error) { // catch excption... });

到這里我們需要看看Promise.then方法是怎么執(zhí)行的：

then: function(onFulfillment, onRejection) {var promise = this;var thenPromise = new this.constructor(function() {});if (this._state) {var callbacks = arguments;config.async(function invokePromiseCallback() {invokeCallback(promise._state, thenPromise, callbacks[promise._state - 1], promise._detail);});} else {subscribe(this, thenPromise, onFulfillment, onRejection);}return thenPromise;},

在調用then方法時，產生了一個新的Promise對象thenPromise，它會參與后面的任務執(zhí)行。現(xiàn)在我們根據(jù)上下文進入subscribe方法：

function subscribe(parent, child, onFulfillment, onRejection) { // parent = customPromiseObject, child = thenPromise, onFulfillment = 成功回調，onRejection = 失敗回調var subscribers = parent._subscribers;var length = subscribers.length;subscribers[length] = child;subscribers[length + FULFILLED] = onFulfillment;subscribers[length + REJECTED] = onRejection; }

subscribers初始化是一個空數(shù)組，所以在這里執(zhí)行完畢后，將會是以下效果：

subscribers[0] = thenPromise;subscribers[1] = 成功回調; subscribers[2] = 失敗回調;promise._subscribers = subscribers;

由于我們的示例代碼使用了catch，所以貼一下catch方法的源代碼：

'catch': function(onRejection) {return this.then(null, onRejection);}

所以在執(zhí)行完then方法以及catch方法之后，promise._ subscribers內部如下：

subscribers[0] = thenPromise;subscribers[1] = 成功回調; subscribers[2] = 失敗回調; subscribers[3] = thenPromise2;subscribers[4] = null; subscribers[5] = catch回調;

到這里，我們的同步事件就執(zhí)行完了。接下來開始分析異步事件。我們回到lib/promise/asap.js文件。

在Promise早期的源代碼中，對Promise的運行平臺做了區(qū)分。我們這里對這塊細節(jié)不做深究，但不管是哪個平臺，最終還是會執(zhí)行到flush方法。這里需要注意：在執(zhí)行flush方法時，它已經在所有事件執(zhí)行之后了。這里的所有事件指的是已經進入主線程隊列的事件，也就是剛剛執(zhí)行完成的同步事件。

function flush() {for (var i = 0; i < queue.length; i++) {var tuple = queue[i];var callback = tuple[0], arg = tuple[1];callback(arg);}queue = []; }

flush方法在這里會回調剛剛傳入的方法publishFulfillment，參數(shù)為那個promise對象。我們確認一下publishFulfillment方法的細節(jié)：

function publishFulfillment(promise) {publish(promise, promise._state = FULFILLED); }

它這里很簡單，直接調用了publish方法。不過在這里，promise對象的狀態(tài)再一次被改變了。從PENDING -> SEALED -> FULFILLED。我們進入publish：

function publish(promise, settled) { // promise = new Promise, settled = FULFILLEDvar child, callback, subscribers = promise._subscribers, detail = promise._detail;for (var i = 0; i < subscribers.length; i += 3) { child = subscribers[i];callback = subscribers[i + settled]; invokeCallback(settled, child, callback, detail); }promise._subscribers = null; }

上面的代碼開始Promise對象的觀察者進行通知。注意這里的for循環(huán)只循環(huán)了兩次。第一次循環(huán)：

child == thenPromise;callback == 成功回調;

我們先來看正常的執(zhí)行，這里直接調用了invokeCallback方法：

function invokeCallback(settled, promise, callback, detail) { settled = FULFILLED, promise = thenPromise, callback = 成功回調, detail = 'Hello'// 檢測callback是否是一個方法var hasCallback = isFunction(callback),value, error, succeeded, failed;// 如果是方法，則執(zhí)行if (hasCallback) {try {value = callback(detail); succeeded = true;} catch(e) {failed = true;error = e;}} else {value = detail;succeeded = true;}if (handleThenable(promise, value)) {return;} else if (hasCallback && succeeded) {resolve(promise, value);} else if (failed) {reject(promise, error);} else if (settled === FULFILLED) {resolve(promise, value);} else if (settled === REJECTED) {reject(promise, value);} }

咱們的示例比較簡單，在檢測回調方法是一個方法之后，就直接調用了。我們的示例也沒有返回值。所以直接走進了hasCallback && succeeded的判斷中，然后進入resolve方法。

function resolve(promise, value) { // promise = thenPromise, value = undefinedif (promise === value) {fulfill(promise, value);} else if (!handleThenable(promise, value)) {fulfill(promise, value);} }

根據(jù)上下文，這里進入了fulfill方法:

function fulfill(promise, value) {// promise = thenPromise, value = null if (promise._state !== PENDING) { return; }promise._state = SEALED;// thenPromise._state = SEALED promise._detail = value;// thenPromise._detail = null config.async(publishFulfillment, promise); }

到這里是不是似曾相識？沒錯，我們在上面已經見過上面兩個方法。不過在這里是要通過flush回調執(zhí)行thenPromise對象。然后根據(jù)上面提到的邏輯，最后thenPromise將會進入publish:

function publish(promise, settled) { // promise = thenPromise, settled = FULFILLED var child, callback, subscribers = promise._subscribers, detail = promise._detail;for (var i = 0; i < subscribers.length; i += 3) { child = subscribers[i];callback = subscribers[i + settled]; invokeCallback(settled, child, callback, detail); }promise._subscribers = null; }

不過thenPromise對象是一個空對象，它的_subscribers屬性是一個空數(shù)組。所以這里自然執(zhí)行完畢。

不過到這里也才是thenPromise執(zhí)行完畢，我們自己構造的Promise對象呢？它才準備進行第二次for循環(huán)：

child == thenPromise2;callback == null;

然后根據(jù)上下文，在執(zhí)行到invokeCallback方法，不過最終它的命運匹配到了settled === FULFILLED的條件，進入了resolve方法：

function resolve(promise, value) { // promise = new Promise, value = undefinedif (promise === value) {fulfill(promise, value);} else if (!handleThenable(promise, value)) {fulfill(promise, value);} }

再進入fulfill方法:

function fulfill(promise, value) {if (promise._state !== PENDING) { return; }promise._state = SEALED;promise._detail = value;config.async(publishFulfillment, promise); }

不過執(zhí)行到這里，promise的_state已經為SEALED了，不等于PENDING，所以Promise也就自然終結了。

至此，一個普通的Promise執(zhí)行終結。

總結

以上是生活随笔為你收集整理的Promise源码解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。