Promise实现原理
2015-07-06 21:40
411 查看
这两天在熟悉 kissy 框架的时候,看到了
Promise模块。
Promise对于一个Jser并不陌生,
Promise类似于一个事务管理器,它的作用就是将各种内嵌回调的事务用流水形式表达。利用
Promise可以让异步编程更符合人的直觉,让代码逻辑更加清晰,把开发人员从回调地狱中释放出来。这么“高大上”的东西,以前写
nodejs代码的时候只是简单的用用,还没有理解其基本的实现原理,罪过!个人认为,理解编程思想最好的途径就是阅读一份简易的实现源码。很幸运,网上有不少
Promise的简易实现,其中 这篇博文 介绍的实现方式非常赞,下面就来好好研究下吧!
基础概念
目前,Promise是
ECMAScript 6规范的重要特性之一,各大浏览器也开始慢慢支持这一特性。当然,也有一些第三方内库实现了该功能,如: Q 、 when 、 WinJS 、 RSVP.js 等。
Promise对象用来进行延迟(
deferred)和异步(
asynchronous)计算。一个
Promise处于以下四种状态之一:
pending: 还没有得到肯定或者失败结果,进行中
fulfilled: 成功的操作
rejected: 失败的操作
settled: 已被
fulfilled或
rejected
Promise对象有两个重要的方法,一个是
then,另一个是
resolve:
then:将事务添加到事务队列中
resolve:开启流程,让整个操作从第一个事务开始执行
Promise常用方式如下:
var p = new Promise(function(resolve, reject) { ... // 事务触发 resovle(xxx); ... }); p.then(function(value) { // 满足 }, function(reason) { // 拒绝 }).then().then()...
示意图如下:
![](http://www.chenjunxyf.me/content/images/2015/06/promises.png)
实现步骤
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 Promiseand, 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
* onFulfilledand onRejectedare only called once.
*
* Makes no guarantees about asynchrony.
*
* @param {Function} fnA 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);
}
if (state === REJECTED &&
typeof handler.onRejected=== 'function') {
handler.onRejected(value);
}
}
}
this.done= function (onFulfilled, onRejected) {
// 保证异步
setTimeout(function () {
handle({
onFulfilled: onFulfilled,
onRejected: onRejected
});
}, 0);
}
doResolve(fn, resolve, reject);
}
当
Promise被
resolved或者
rejected时,我们保证
handlers将被通知。
5.现在我们已经实现了
done方法,下面实现
then方法就很容易了。需要注意的是,我们要在处理程序中新建一个
Promise。
this.then= function (onFulfilled, onRejected) {
var self = this;
return new Promise(function (resolve, reject) {
return self.done(function (result) {
if (typeof onFulfilled=== 'function') {
try {
// onFulfilled方法要有返回值!
return resolve(onFulfilled(result));
} catch (ex) {
return reject(ex);
}
} else {
return resolve(result);
}
}, function (error) {
if (typeof onRejected=== 'function') {
try {
return resolve(onRejected(error));
} catch (ex) {
return reject(ex);
}
} else {
return reject(error);
}
});
});
}
测试
完成了上面的代码,测试就很容易啦。偷个懒,测试实例来自MDN:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promisetest</title>
<script src="http://www.chenjunxyf.me/promiseshi-xian-yuan-li/mypromise.js"></script>
</head>
<body>
<button id="test">promisetest</button>
<div id="log"></div>
<script>
var promiseCount = 0;
function testPromise() {
var thisPromiseCount = ++promiseCount;
var log = document.getElementById('log');
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 开始(同步代码开始)');
var p1 = new Promise(
function(resolve, reject) {
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)');
window.setTimeout(function() {
resolve(thisPromiseCount);
}, Math.random() * 2000 + 1000);
}
);
p1.then(
function(val) {
log.insertAdjacentHTML('beforeend', val + ') Promise被满足了(异步代码结束)');
}
);
log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)');
}
document.querySelector('button').addEventListener('click', testPromise);
</script>
</body>
</html>
效果:
![](http://www.chenjunxyf.me/content/images/2015/06/promise-show.gif)
结语
通过一份简易的实现代码,理解Promise原理还是挺容易的。本文所有代码请 戳这 !PS:这次用了 vscode 写代码,感觉非常赞!
参考
JavaScript PromisesImplementing promise
Promise原理解析与实现
细嗅Promise
MDN Promise
How is a promise/defer library implemented?
点赞
前端 javascript
相关文章推荐
- Android视图绘制流程完全解析,带你一步步深入了解View(二)
- LeetCode之Wildcard Matching
- C语言基本数据类型及其扩展和可移植性问题
- 我的第二次北京之旅
- [安卓基础] 007.管理Activity的生命周期
- 使用事件通道
- Java模板模式(Template模式)
- Python图像处理(15):SVM分类器
- java并发4-单例设计方法
- 谈论开源技术选择
- 开启博客之路
- msp430学习笔记之时钟
- android 实践- 2015/07/06
- Android 进阶学习:Android LayoutInflater原理分析,带你一步步深入了解View(一)
- php5.3.x连接MS SQL server2008
- Javascript 正则表达式笔记
- 【bzoj2510】弱题 概率dp+循环矩阵矩阵乘法
- LeetCode216:Combination Sum III
- 命令模式,状态模式和职责链模式的不同
- 二叉树重建