Promise 库 lie.js 源码解读
这篇文章是通过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);
}
}<pre style="text-align: left;"><span style="font-size: 16px;"><br></br>构造函数内部定义了几个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去递归处理promise
QueueItem.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方法中的回调统一设计为异步执行也保证了代码逻辑执行顺序。