标签:
这两天在熟悉 kissy 框架的时候,看到了
Promise
模块。Promise
对于一个Jser并不陌生,Promise
类似于一个事务管理器,它的作用就是将各种内嵌回调的事务用流水形式表达。利用Promise
可以让异步编程更符合人的直觉,让代码逻辑更加清晰,把开发人员从回调地狱中释放出来。这么“高大上”的东西,以前写nodejs
代码的时候只是简单的用用,还没有理解其基本的实现原理,罪过!个人认为,理解编程思想最好的途径就是阅读一份简易的实现源码。很幸运,网上有不少Promise
的简易实现,其中 这篇博文 介绍的实现方式非常赞,下面就来好好研究下吧!
目前, Promise
是 ECMAScript 6
规范的重要特性之一,各大浏览器也开始慢慢支持这一特性。当然,也有一些第三方内库实现了该功能,如: Q 、 when 、 WinJS 、 RSVP.js 等。
Promise
对象用来进行延迟( deferred
)和异步( asynchronous
)计算。一个 Promise
处于以下四种状态之一:
fulfilled
或 rejected
Promise
对象有两个重要的方法,一个是 then
,另一个是 resolve
:
Promise
常用方式如下:
var p = new Promise(function(resolve, reject) {
...
// 事务触发
resovle(xxx);
...
});
p.then(function(value) {
// 满足
}, function(reason) {
// 拒绝
}).then().then()...
示意图如下:
1. Promise
其实就是一个状态机。按照它的定义,我们可从如下基础代码开始:
var PENDING = 0; // 进行中
var FULFILLED = 1; // 成功
var REJECTED = 2; // 失败
function Promise() {
// 存储PENDING, FULFILLED或者REJECTED的状态
var state = PENDING;
// 存储成功或失败的结果值
var value = null;
// 存储成功或失败的处理程序,通过调用`.then`或者`.done`方法
var handlers = [];
// 成功状态变化
function fulfill(result) {
state = FULFILLED;
value = result;
}
// 失败状态变化
function reject(error) {
state = REJECTED;
value = error;
}
}
2.下面是 Promise
的 resolve
方法实现:
注意: resolve
方法可接收的参数有两种:一个普通的值/对象或者一个 Promise
对象。如果是普通的值/对象,则直接把结果传递到下一个对象;如果是一个 Promise
对象,则必须先等待这个子任务序列完成。
function Promise() {
...
function resolve(result) {
try {
var then = getThen(result);
// 如果是一个promise对象
if (then) {
doResolve(then.bind(result), resolve, reject);
return;
}
// 修改状态,传递结果到下一个事务
fulfill(result);
} catch (e) {
reject(e);
}
}
}
两个辅助方法:
/**
* Check if a value is a Promise and, if it is,
* return the `then` method of that promise.
*
* @param {Promise|Any} value
* @return {Function|Null}
*/
function getThen(value) {
var t = typeof value;
if (value && (t === ‘object‘ || t === ‘function‘)) {
var then = value.then;
if (typeof then === ‘function‘) {
return then;
}
}
return null;
}
/**
* Take a potentially misbehaving resolver function and make sure
* onFulfilled and onRejected are only called once.
*
* Makes no guarantees about asynchrony.
*
* @param {Function} fn A resolver function that may not be trusted
* @param {Function} onFulfilled
* @param {Function} onRejected
*/
function doResolve(fn, onFulfilled, onRejected) {
var done = false;
try {
fn(function(value) {
if (done) return;
done = true;
onFulfilled(value);
}, function(reason) {
if (done) return;
done = true;
onRejected(reason);
});
} catch(ex) {
if (done) return;
done = true;
onRejected(ex);
}
}
3.上面已经完成了一个完整的内部状态机,但我们并没有暴露一个方法去解析或则观察 Promise
。现在让我们开始解析 Promise
:
function Promise(fn) {
...
doResolve(fn, resolve, reject);
}
如你所见,我们复用了 doResolve
,因为对于初始化的 fn
也要对其进行控制。 fn
允许调用 resolve
或则 reject
多次,甚至抛出异常。这完全取决于我们去保证 promise
对象仅被 resolved
或则 rejected
一次,且状态不能随意改变。
4.目前,我们已经有了一个完整的状态机,但我们仍然没有办法去观察它的任何变化。我们最终的目标是实现 then
方法,但 done
方法似乎更简单,所以让我们先实现它。
我们的目标是实现 promise.done(onFullfilled, onRejected)
:
onFulfilled
和 onRejected
两者只能有一个被执行,且执行次数为一promise
链式调用结束promise
已经被解析,都可以调用该方法var PENDING = 0; // 进行中
var FULFILLED = 1; // 成功
var REJECTED = 2; // 失败
function Promise() {
// 存储PENDING, FULFILLED或者REJECTED的状态
var state = PENDING;
// 存储成功或失败的结果值
var value = null;
// 存储成功或失败的处理程序,通过调用`.then`或者`.done`方法
var handlers = [];
// 成功状态变化
function fulfill(result) {
state = FULFILLED;
value = result;
handlers.forEach(handle);
handlers = null;
}
// 失败状态变化
function reject(error) {
state = REJECTED;
value = error;
handlers.forEach(handle);
handlers = null;
}
function resolve(result) {
try {
var then = getThen(result);
if (then) {
doResolve(then.bind(result), resolve, reject)
return
}
fulfill(result);
} catch (e) {
reject(e);
}
}
// 不同状态,进行不同的处理
function handle(handler) {
if (state === PENDING) {
handlers.push(handler);
} else {
if (state === FULFILLED &&
typeof handler.onFulfilled === ‘function‘) {
handler.onFulfilled(value);
}