Promise 库 lie.js 源码解读-技术圈

来源 | https://github.com/CommanderXL/biu-blog/issues/26

这篇文章是通过lie.js的源码一起去了解下如何实现Promise相关的规范。

首先是Promise的核心的构造函数的实现。

function INTERNAL() {}
var REJECTED = ['REJECTED'];var FULFILLED = ['FULFILLED'];var PENDING = ['PENDING'];
var handlers = {}
function Promise (resolver) {  if (typeof resolver !== 'function') {    throw new TypeError('resolver must be a function');  }  this.state = PENDING;  this.queue = [];  this.outcome = void 0;  /* istanbul ignore else */  if (!process.browser) {    this.handled = UNHANDLED;  }  if (resolver !== INTERNAL) {    safelyResolveThenable(this, resolver);  }}

构造函数内部定义了几个promise实例的属性：

state：promise的状态值.有3种：rejected，fulfilled，pending
queue：queue数组用以保存这个promise被resolve/rejected后需要异步执行的回调
outcome：这个promise实例的值

对于promise，我们一般的用法是：

// 构造函数当中接收2个参数,resolve/reject，需要注意的是这2个参数是promise内部定义的，用以改变这个promise的状态和值const promise = new Promise((resolve, reject) => {  // 同步或者异步的去resolve一个值  resolve(1)})

给这个Promise构造函数内部传入的resolver由内部的方法safelyResolveThenable去执行:

function safelyResolveThenable(self, thenable) {  // Either fulfill, reject or reject with error  // 标志位，初始态的promise仅仅只能被resolve/reject一次  var called = false;  function onError(value) {    if (called) {      return;    }    called = true;    // reject这个promise    handlers.reject(self, value);  }
  function onSuccess(value) {    if (called) {      return;    }    called = true;    // resolve这个promise    handlers.resolve(self, value);  }
  // 用一个函数将resolver执行包裹一层  function tryToUnwrap() {    // 这个函数即由调用方传入的    thenable(onSuccess, onError);  }
  // 用以捕获resolver在执行过程可能抛出的错误  var result = tryCatch(tryToUnwrap);  if (result.status === 'error') {    onError(result.value);  }}
function tryCatch(func, value) {  var out = {};  try {    out.value = func(value);    out.status = 'success';  } catch (e) {    out.status = 'error';    out.value = e;  }  return out;}

在safelyResolveThenable方法中设定了一个called标志位，这是因为一旦一个promise的状态发生了改变，那么之后的状态不能再次被改变，举例:

new Promise((resolve, reject) => {  // 一旦状态发生改变，后面的reject/resolve方法不能起作用  resolve(1)  reject(new Error('error'))  resolve(2)})

如果给Promise构造函数传入callback在执行过程中没有报错，且被resolve的话，那么这个时候即调用的onSuccess方法，这个方法内部调用了handlers.resolve方法。

接下来我们看下这个方法的定义：

handlers.resolve = function (self, value) {  var result = tryCatch(getThen, value);  if (result.status === 'error') {    return handlers.reject(self, result.value);  }  // 判断这个value是否是个thenable对象  var thenable = result.value;
  if (thenable) {    safelyResolveThenable(self, thenable);  } else {    // 将这个promise的state从 pending -> fulfilled    self.state = FULFILLED;    // 更改这个promise对应的值    self.outcome = value;    var i = -1;    var len = self.queue.length;    // 依次执行这个promise的queue队列里面每一项queueItem的callFulfilled方法    while (++i < len) {      self.queue[i].callFulfilled(value);    }  }  // 返回这个promise对象  return self;}

再回到我们上面举的这个例子：

const promise = new Promise(resolve => {  resolve(1)})

在这个例子当中，是同步去resolve这个promise，那么返回的这个promise实例的状态便为fulfilled，同时outcome的值也被设为1。

将这个例子拓展一下：

const promise = new Promise(resolve => {  resolve(1)})
promise.then(function onFullfilled (value) {  console.log(value)})

在实例的then方法上传入一个onFullfilled回调执行上面的代码，最后在控制台输出1。

接下来我们看下Promise原型上then方法的定义：

Promise.prototype.then = function (onFulfilled, onRejected) {  if (typeof onFulfilled !== 'function' && this.state === FULFILLED ||    typeof onRejected !== 'function' && this.state === REJECTED) {    return this;  }  // 创建一个新的promise  var promise = new this.constructor(INTERNAL);  /* istanbul ignore else */  if (!process.browser) {    if (this.handled === UNHANDLED) {      this.handled = null;    }  }
  // new Promise在内部resolve过程中如果是同步的  if (this.state !== PENDING) {    var resolver = this.state === FULFILLED ? onFulfilled : onRejected;    unwrap(promise, resolver, this.outcome);  } else { // 异步的resolve    // this.queue保存了对于promise    this.queue.push(new QueueItem(promise, onFulfilled, onRejected));  }
  return promise;};

在then方法内部首先创建一个新的promise，接下来会根据这个promise的状态来进行不同的处理。

如果这个promise已经被resolve/reject了(即非pending态)，那么会直接调用unwrap()方法来执行对应的回调函数；

如果这个promise还是处于pending态，那么需要实例化一个QueueItem，并推入到queue队列当中。

我们首先分析第一种情况，即调用then方法的时候，promise的状态已经被resolve/reject了，那么根据对应的state来取对应的回调函数，并调用unwrap函数(后面会详细讲解这个方法)。

function unwrap(promise, func, value) {  // 异步执行这个func  immediate(function () {    var returnValue;    try {      // 捕获onFulfilled函数在执行过程中的错误      returnValue = func(value);    } catch (e) {      return handlers.reject(promise, e);    }    // 不能返回自身promise    if (returnValue === promise) {      handlers.reject(promise, new TypeError('Cannot resolve promise with itself'));    } else {      handlers.resolve(promise, returnValue);    }  });}

在这个函数中，使用immediate方法统一的将func方法异步的执行。并将这个func执行的返回值传递到下一个promise的处理方法当中。

因此在上面给的例子当中，因为Promise的状态是被同步resolve的，那么接下来立即调用then方法，并执行传入的onFullfilled方法。

第二种情况，如果promise还是处于pending态，这个时候不是立即执行callback，首先实例化一个QueueItem，并缓存到这个promise的queue队列当中，延迟执行这个queue当中保存的回调函数。

function QueueItem(promise, onFulfilled, onRejected) {  // 首先保存这个promise  this.promise = promise;  // 如果onFulfilled是一个函数  if (typeof onFulfilled === 'function') {    this.onFulfilled = onFulfilled;    // 那么重新赋值callFulfilled函数    this.callFulfilled = this.otherCallFulfilled;  }  if (typeof onRejected === 'function') {    this.onRejected = onRejected;    this.callRejected = this.otherCallRejected;  }}// 如果onFulfilled是一个函数，那么就会覆盖callFulfilled方法// 如果onFulfilled不是一个函数，那么就会直接调用handlers.resolve去递归处理promiseQueueItem.prototype.callFulfilled = function (value) {  handlers.resolve(this.promise, value);};QueueItem.prototype.otherCallFulfilled = function (value) {  unwrap(this.promise, this.onFulfilled, value);};QueueItem.prototype.callRejected = function (value) {  handlers.reject(this.promise, value);};QueueItem.prototype.otherCallRejected = function (value) {  unwrap(this.promise, this.onRejected, value);};

QueueItem构造函数接受3个参数:promise，onFullfilled，onRejected。

promise

在then当中新创建的promise对象

onFullfilled：上一个promise被resolve后需要调用的回调
onRejected：上一个promise被reject后需要调用的回调函数

接下来我们看下第二种情况是在什么样的情况下去执行的：

const promise = new Promise(resolve => {  setTimeout(() => {    resolve(1)  }, 3000)})
promise.then(data => console.log(data))

在这个例子当中，当过了3s后在控制台输出1。在这个例子当中，因为promise内部是异步去resolve这个promise。

在这个promise被resolve前，promise实例通过then方法向这个promise的queue队列中添加onFullfilled方法，这个queue中保存的方法会等到promise被resolve后才会被执行。

当在实际的调用resolve(1)时，即promise这个时候才被resolve，那么便会调用handlers.resolve方法，并依次调用这个promise的queue队列当中保存的onFullfilled函数

可以看到在QueueItem函数内部，会对onFullfilled和onRejected的参数类型做判断，只有当它们是函数的时候，才会将这个方法进行一次缓存，同时使用otherCallFulfilled方法覆盖原有的callFulfilled方法。这也是大家经常会遇到的值穿透的问题，举个例子：

const promise = new Promise(resolve => {  setTimeout(() => {    resolve(2)  }, 2000)})
promise.then(3).then(console.log)

最后在控制台打印出2，而非3。当上一个promise被resolve后，调用这个promise的queue当中缓存的queueItem上的callFulfilled方法，因为then方法接收的是数值类型，因此这个queueItem上的callFulfilled方法未被覆盖，因此这时所做的便是直接将这个queueItem中保存的promise进行resolve，同时将上一个promise的值传下去。

可以这样理解，如果then方法第一个参数接收到的是个函数，那么就由这个函数处理上一个promise传递过来的值，如果不是函数，那么就像管道一样，先流过这个then方法，而将上一个值传递给下下个then方法接收到的函数去处理。

上面提到了关于unwrap这个函数，这个函数的作用就是统一的将then方法中接收到的onFullfilled参数异步的执行。

主要是使用了immediate这个库。这里说明下为什么统一的要将onFullfilled方法进行异步话的处理呢。

首先，是要解决代码逻辑执行顺序的问题，首先来看一种情况：

const promise = new Promise(resolve => {  // 情况一：同步resolve  resolve(1)  // 情况二：异步resolve  setTimeout(() => {    resolve(2)  }, 1000)})promise.then(function onFullfilled() {  // do something  foo()})bar()

这个promise可能会被同步的resolve，也有可能异步的resolve，这个时候如果onFullfilled方法设计成同步的执行的话，那么foo及bar的执行顺序便依赖promise是被同步or异步被resolve，但是如果统一将onFullfilled方法设计成异步的执行的话，那么bar方法始终在foo方法前执行，这样就保证了代码执行的顺序。

其次，是要解决同步回调stackoverflow的问题，具体的链接请戳我

我们看到lie.js的内部实现当中，每次在调用then方法的时候，内部都新创建了一个promise的对象并返回，这样也完成了promise的链式调用。即：

const Promise = require('lie')const promise = new Promise(resolve => setTimeout(resolve, 3000))promise.then(() => 'a').then(() => 'b').then(() => {})

需要注意的是，在每个then方法内部创建的新的promise对象的state为pending态，outcome为null。可以将上面示例的promise打印到控制台，你会非常清晰的看到整个promise链的结构：

Promise {  state: [ 'PENDING' ],  queue:   [ QueueItem {       promise: {         state: ['PENDING'],         queue: [           QueueItem {             promise: {               state: ['PENDING'],               queue: [                 QueueItem {                   promise: {                     state: ['PENDING'],                     queue: [],                     outcome: undefined                   }                 }               ],               outcome: undefined,               handled: null             },             onFulfilled: [Function],             callFulfilled: [Function]           }         ],        outcome: undefined,        handled: null               },       onFulfilled: [Function],       callFulfilled: [Function] } ],  outcome: undefined,  handled: null }

实际这个promise链是一个嵌套的结构，一旦的最外部的promise的状态发生了改变，那么就会依次执行这个promise的queue队列里保存的queueItem的onFulfilled或者onRejected方法，并这样一直传递下去。

因此这也是大家经常看到的promise链一旦开始，就会一直向下执行，没法在哪个promise的执行过程中中断。

不过刚才也提到了关于在then方法内部是创建的一个新的pending状态的promise，这个promise状态的改变完全是由上一个promise的状态决定的，如果上一个promise是被resolve的，那么这个promise同样是被resolve的(前提是在代码执行过程中没有报错)，并这样传递下去，同样如果上一个promise是被rejected的，那么这个状态也会一直传递下去。

如果有这样一种情况，在某个promise封装的请求中，如果响应的错误码不符合要求，不希望这个promise继续被resolve下去，同时想要单独的catch住这个响应的话，那么可以在then方法中直接返回一个被rejected的promise。

这样在这个promise后面的then方法中创建的promise的state都会被rejected，同时这些promise所接受的fullfilled方法不再执行，如果有传入onRejected方法的话便会执行onRejected方法，最后一直传递到的catch方法中添加的onReject方法。

someRequest().then(res => {  if (res.error === 0) {    // do something    return res  } else {    return Promise.reject(res)  }}).then(val => {  // do something}).catch(err => {  // do something})

看完lie的源码后，觉得promise设计还是挺巧妙的，promise事实上就是一个状态机，不过状态值能发生一次转变，由于then方法内部每次都是创建了一个新的promise，这样也完成了promise的链式调用，同时then方法中的回调统一设计为异步执行也保证了代码逻辑执行顺序。