Promise学习笔记(四):源码core.js解析(下)

源码阅读阶段

紧接上一篇,这次我们开始Promise我们最常用到的then部分的源码解析.

then()

//传入参数为两个函数,onFulfilled和onRejected
Promise.prototype.then = function(onFulfilled, onRejected) {
  //判断调用者是否为Promise对象
  if (this.constructor !== Promise) {
    //跳转到了一个叫做safeThen的函数里面
    return safeThen(this, onFulfilled, onRejected);
  }
  //新建一个promise对象,传入function(){}.
  var res = new Promise(noop);
  //handle函数,传入给promise,和一个新的Handler对象.
  handle(this, new Handler(onFulfilled, onRejected, res));
  //返回新的promise对象res
  return res;
};

在这里我们先看看在调用者不是Promise对象时,safeThen到底做了什么.

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));
  });
}

比想象的要简单点,它直接根据传入的非Promise对象return了一个新的Promise对象.并且和then函数一样调用了handle()函数.也就是说该函数相当于new了个Promise再调用then函数一样.

handle函数

在上篇我们已经对其进行过阅读,现在可以继续看一下这一次情况有什么不同,方便阅读只放部分代码.

function handle(self, deferred) {传入一个promise对象和handler对象
  //略检测代码
  if (self._state === 0) {//promise对象状态为pending
    if (self._deferredState === 0) {//defereds为null时,将handler对象放入defereds
      self._deferredState = 1;
      self._deferreds = deferred;
      return;
    }
    if (self._deferredState === 1) {//defereds为单个时,将defereds转为数组,将handler对象放入defereds数组
      self._deferredState = 2;
      self._deferreds = [self._deferreds, deferred];
      return;
    }
    //defereds为数组时,直接push添加
    self._deferreds.push(deferred);
    return;
  }
  //promise对象状态不为pending时,传入promise和handler对象,进行处理
  handleResolved(self, deferred);
}

很好,接下来就是handleResolved的内部处理了,还记得上篇我们说的deferred是一个保存了promise对象,onFulfilled函数,onRejected函数的对象,这句话么,这里我们可以得出handler对象就是我们上篇所认为的deferred.而defereds就是保存它们的地方.

handler对象

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函数,有onRejected函数.

中途整理

可以看到then函数其实就是将我们传入了onFulfilled函数和onRejected函数和新建的一个promise对象,把三者封装到一个handler里面.然后在handle函数里面把handler放进调用then函数的promise对象的_deffereds里面.
值得注意的是

  //promise对象状态不为pending时,传入promise和handler对象,进行处理
  handleResolved(self, deferred);

这一段代码表示了当调用的promise部位pending状态的时候,将会对我们promise对象的_deferreds进行处理.
结合我们上一章看到的finale()中对promise对象的_deferred的循环handle处理,我们可以构建起整整一条关于调用的链,光说,还是不如直接说案例啦.

Promise调用then到底发生了啥?

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);
});

例子如上,我们逐步拆分

new Promise()

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

这里我们传入了一个函数,并console.log出了"construct pending"的字样,然后进行了resolve,参考上一篇的流程,答案显而易见,B的数据如下

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

然后我们就调用了then函数,我们跟着思路继续走.

B.then()

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

这是第一个then,我们跳到源码看一下内部做了啥,为了方便记忆,我们把传入的onFulfilled函数记为T1,onRejected函数记为T2,B也就称为B~
B.then(T1,T2)
我们就对其进行探讨吧,首先在源码中先判断调用者是否为Promise对象,B.constructor!==Promise,而这明显是Promise对象,所以不需要进行safeThen()(虽然说safeThen也只是进行一次转换,这里不深究),然后我们就新建了一个res变量保存new Promise(function(){})
执行 handle(this,new Handler(onFulfilled, onRejected, res));
然后返回res

跳转到调用handle()里面

传入this为B,传入的handler绑定了新建并应该返回的promise对象res,还有T1,T2函数.
显现检测B是否为pending状态,结果并不是!
中间对defereds处理直接跳过.直接进行handleResolved(B,handler)

跳转到handleResolved()

检查B._state为1也就是fulfilled状态,返回handler.onFulfilled给cb变量.
跳过cb===null的判定
执行tryCallOne(cb,B._value) 等同于

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

所以,可以发现console.log除了"ok"字串,然后在tryCallOne中抛出了异常.根据上篇中tryCallOne源码

//内部捕获错误,单个参数函数
function tryCallOne(fn, a) {
  try {
    return fn(a);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

我们发现其中抛出了错误被成功捕获了并返回了标识错误IS_ERROR.LAST_ERROR = "ok"
所以变量ret赋值为IS_ERROR
调用reject(res,"ex")

跳转到reject()

传入参数为res,"ex"
res._state = 2; 也就是让res状态变为rejected
res._value = "ex"; 让res拒因变为"ex"
接下来的if不成立,我们不需理会.
然后调用了finale(res)

跳转到finale()

传入参数为res
由于res._deferredState = 0,所以finale不进行任何操作,至此结束handle(this,new Handler(onFulfilled, onRejected, res))的操作,执行返回res的操作.

返回res

更改处为:

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

所以传递给下一个then的promise对象为res,状态为rejected拒因为"ex"

第二个then()

调用它的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显而易见,状态也不为pending,直接执行handleResolved(resultA,handler)
handleResolved中像上次一样,执行了tryCallOne(),但是这次要注意,并没有错误被抛出,所以var ret获取到的是函数执行后的返回值,为空.

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

值console.log出了"second error"和"ex"(resultA._value).
那么接下来呢,没错,ret为空了...也就是没有错误呀
然后我们就进入了resolv(handler.promise,ret)

奇妙的跳到了resolve()

传入的ret为空值,根据规范,这直接就跳到了

  self._state = 1;//promise状态为fulfilled
  self._value = ret;//值传递
  finale(self);//finale了

至于finale我们也不用理会,等于直接结束了handle()的执行,然后返回的promise对象我们成为resultB,然后数据如下:

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

传递给下一个then的为fulfilled状态,终值为null的promise对象resultB

catch()

根据之前的博文,我们提到过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状态下调用的函数自然与handler构造中变为null的onFulfilled有关了.调用了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);
  })

并不会出现任何console,因为该函数并没有被执行.
catch执行后返回promise对象为resultC,大家可以用.then(function(value){console.log(value)})验证下,console出来会是undefined

小结

持续进行修订吧,有时间再补上函数跳转处理图,还有Promise.race和Promise.all函数大概要等到比较久之后才会去写啦~明天开始回归继续做些小玩意