摘要：源碼閱讀階段緊接上一篇這次我們開始我們最常用到的部分的源碼解析傳入?yún)?shù)為兩個函數(shù)和判斷調(diào)用者是否為對象跳轉(zhuǎn)到了一個叫做的函數(shù)里面新建一個對象傳入函數(shù)傳入給和一個新的對象返回新的對象在這里我們先看看在調(diào)用者不是對象時到底做了什么比想象的要簡單

緊接上一篇,這次我們開始Promise我們最常用到的then部分的源碼解析.

//傳入?yún)?shù)為兩個函數(shù),onFulfilled和onRejected
Promise.prototype.then = function(onFulfilled, onRejected) {
  //判斷調(diào)用者是否為Promise對象
  if (this.constructor !== Promise) {
    //跳轉(zhuǎn)到了一個叫做safeThen的函數(shù)里面
    return safeThen(this, onFulfilled, onRejected);
  }
  //新建一個promise對象,傳入function(){}.
  var res = new Promise(noop);
  //handle函數(shù),傳入給promise,和一個新的Handler對象.
  handle(this, new Handler(onFulfilled, onRejected, res));
  //返回新的promise對象res
  return res;
};

在這里我們先看看在調(diào)用者不是Promise對象時,safeThen到底做了什么.

function safeThen(self, onFulfilled, onRejected) {
  return new self.constructor(function (resolve, reject) {
    var res = new Promise(noop);
    res.then(resolve, reject);
    handle(self, new Handler(onFulfilled, onRejected, res));
  });
}

比想象的要簡單點,它直接根據(jù)傳入的非Promise對象return了一個新的Promise對象.并且和then函數(shù)一樣調(diào)用了handle()函數(shù).也就是說該函數(shù)相當于new了個Promise再調(diào)用then函數(shù)一樣.

在上篇我們已經(jīng)對其進行過閱讀,現(xiàn)在可以繼續(xù)看一下這一次情況有什么不同,方便閱讀只放部分代碼.

function handle(self, deferred) {傳入一個promise對象和handler對象
  //略檢測代碼
  if (self._state === 0) {//promise對象狀態(tài)為pending
    if (self._deferredState === 0) {//defereds為null時,將handler對象放入defereds
      self._deferredState = 1;
      self._deferreds = deferred;
      return;
    }
    if (self._deferredState === 1) {//defereds為單個時,將defereds轉(zhuǎn)為數(shù)組,將handler對象放入defereds數(shù)組
      self._deferredState = 2;
      self._deferreds = [self._deferreds, deferred];
      return;
    }
    //defereds為數(shù)組時,直接push添加
    self._deferreds.push(deferred);
    return;
  }
  //promise對象狀態(tài)不為pending時,傳入promise和handler對象,進行處理
  handleResolved(self, deferred);
}

很好,接下來就是handleResolved的內(nèi)部處理了,還記得上篇我們說的deferred是一個保存了promise對象,onFulfilled函數(shù),onRejected函數(shù)的對象,這句話么,這里我們可以得出handler對象就是我們上篇所認為的deferred.而defereds就是保存它們的地方.

function Handler(onFulfilled, onRejected, promise){
  this.onFulfilled = typeof onFulfilled === "function" ? onFulfilled : null;
  this.onRejected = typeof onRejected === "function" ? onRejected : null;
  this.promise = promise;
}

這里就很簡單易懂了,handler就是這么一個東西,里面有promise對象,有onFulfilled函數(shù),有onRejected函數(shù).

可以看到then函數(shù)其實就是將我們傳入了onFulfilled函數(shù)和onRejected函數(shù)和新建的一個promise對象,把三者封裝到一個handler里面.然后在handle函數(shù)里面把handler放進調(diào)用then函數(shù)的promise對象的_deffereds里面.
值得注意的是

  //promise對象狀態(tài)不為pending時,傳入promise和handler對象,進行處理
  handleResolved(self, deferred);

這一段代碼表示了當調(diào)用的promise部位pending狀態(tài)的時候,將會對我們promise對象的_deferreds進行處理.
結(jié)合我們上一章看到的finale()中對promise對象的_deferred的循環(huán)handle處理,我們可以構(gòu)建起整整一條關(guān)于調(diào)用的鏈,光說,還是不如直接說案例啦.

var B = new Promise(function(resolve,reject){
  console.log("construct pending");
  resolve("ok");
});
B
  .then(function(value){
  console.log(value);
  throw "ex";
},function(reason){
  console.log("first");
})
  .then(function(value){
  console.log("second success");
  console.log(value);
},function(reason){
  console.log("second error");
  console.log(reason);
})
  .catch(function(reason){
  console.log("catch error");
  console.log(reason);
});

例子如上,我們逐步拆分

var B = new Promise(function(resolve,reject){
  console.log("construct pending");
  resolve("ok");
}); 

這里我們傳入了一個函數(shù),并console.log出了"construct pending"的字樣,然后進行了resolve,參考上一篇的流程,答案顯而易見,B的數(shù)據(jù)如下

A._deferredState = 0;
A._state = 1;
A._value = "ok";
A._deferreds = null;

然后我們就調(diào)用了then函數(shù),我們跟著思路繼續(xù)走.

  .then(function(value){
  console.log(value);
  throw "ex";
},function(reason){
  console.log("first");
})

這是第一個then,我們跳到源碼看一下內(nèi)部做了啥,為了方便記憶,我們把傳入的onFulfilled函數(shù)記為T1,onRejected函數(shù)記為T2,B也就稱為B~
B.then(T1,T2)
我們就對其進行探討吧,首先在源碼中先判斷調(diào)用者是否為Promise對象,B.constructor!==Promise,而這明顯是Promise對象,所以不需要進行safeThen()(雖然說safeThen也只是進行一次轉(zhuǎn)換,這里不深究),然后我們就新建了一個res變量保存new Promise(function(){})
執(zhí)行 handle(this,new Handler(onFulfilled, onRejected, res));
然后返回res

跳轉(zhuǎn)到調(diào)用handle()里面

傳入this為B,傳入的handler綁定了新建并應(yīng)該返回的promise對象res,還有T1,T2函數(shù).
顯現(xiàn)檢測B是否為pending狀態(tài),結(jié)果并不是!
中間對defereds處理直接跳過.直接進行handleResolved(B,handler)

跳轉(zhuǎn)到handleResolved()

檢查B._state為1也就是fulfilled狀態(tài),返回handler.onFulfilled給cb變量.
跳過cb===null的判定
執(zhí)行tryCallOne(cb,B._value) 等同于

tryCallOne(function(value){
  console.log(value);
  throw "ex";
},"ok");

所以,可以發(fā)現(xiàn)console.log除了"ok"字串,然后在tryCallOne中拋出了異常.根據(jù)上篇中tryCallOne源碼

//內(nèi)部捕獲錯誤,單個參數(shù)函數(shù)
function tryCallOne(fn, a) {
  try {
    return fn(a);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

我們發(fā)現(xiàn)其中拋出了錯誤被成功捕獲了并返回了標識錯誤IS_ERROR.LAST_ERROR = "ok"
所以變量ret賦值為IS_ERROR
調(diào)用reject(res,"ex")

跳轉(zhuǎn)到reject()

傳入?yún)?shù)為res,"ex"
res._state = 2; 也就是讓res狀態(tài)變?yōu)閞ejected
res._value = "ex"; 讓res拒因變?yōu)?ex"
接下來的if不成立,我們不需理會.
然后調(diào)用了finale(res)

跳轉(zhuǎn)到finale()

傳入?yún)?shù)為res
由于res._deferredState = 0,所以finale不進行任何操作,至此結(jié)束handle(this,new Handler(onFulfilled, onRejected, res))的操作,執(zhí)行返回res的操作.

返回res

更改處為:

res._state = 2;
res._value = "ex";

所以傳遞給下一個then的promise對象為res,狀態(tài)為rejected拒因為"ex"

調(diào)用它的promise對象為上訴返回的res,我們改稱為resultA

resultA.then(function(value){
  console.log("second success");
  console.log(value);
},function(reason){
  console.log("second error");
  console.log(reason);
})

跟著上面的思路走,我們清楚的知道主要處理時在handle(this,new Handler(onFulfilled, onRejected, res))的操作.
而resultA顯而易見,狀態(tài)也不為pending,直接執(zhí)行handleResolved(resultA,handler)
handleResolved中像上次一樣,執(zhí)行了tryCallOne(),但是這次要注意,并沒有錯誤被拋出,所以var ret獲取到的是函數(shù)執(zhí)行后的返回值,為空.

function(reason){
  console.log("second error");
  console.log(reason);
}
//并沒有返回任何東西

值console.log出了"second error"和"ex"(resultA._value).
那么接下來呢,沒錯,ret為空了...也就是沒有錯誤呀
然后我們就進入了resolv(handler.promise,ret)

奇妙的跳到了resolve()

傳入的ret為空值,根據(jù)規(guī)范,這直接就跳到了

  self._state = 1;//promise狀態(tài)為fulfilled
  self._value = ret;//值傳遞
  finale(self);//finale了

至于finale我們也不用理會,等于直接結(jié)束了handle()的執(zhí)行,然后返回的promise對象我們成為resultB,然后數(shù)據(jù)如下:

resultB._state = 1;//為fulfilled
resultB._value = null;//為空值

傳遞給下一個then的為fulfilled狀態(tài),終值為null的promise對象resultB

根據(jù)之前的博文,我們提到過catch(fn)等同于then(undefined,fn)
主要的原因在于handleResolve中

    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
    if (cb === null) {
        if (self._state === 1) {
            resolve(deferred.promise, self._value);
        } else {
            reject(deferred.promise, self._value);
        }
        return;
    }

那么fulfilled狀態(tài)下調(diào)用的函數(shù)自然與handler構(gòu)造中變?yōu)?b>null的onFulfilled有關(guān)了.調(diào)用了resolve(deferred.promise, self._value);
傳入新建的promise和null為終值.
新建的promise我們稱為resultC

resultC._state = 1;
resultC._value = null;

所以在catch這段處理中

  .catch(function(reason){
      console.log("catch error");
      console.log(reason);
  })

并不會出現(xiàn)任何console,因為該函數(shù)并沒有被執(zhí)行.
catch執(zhí)行后返回promise對象為resultC,大家可以用.then(function(value){console.log(value)})驗證下,console出來會是undefined

持續(xù)進行修訂吧,有時間再補上函數(shù)跳轉(zhuǎn)處理圖,還有Promise.race和Promise.all函數(shù)大概要等到比較久之后才會去寫啦~明天開始回歸繼續(xù)做些小玩意