Promise 原理探究及其简单实现
可移步 http://donglegend.com/2016/09/11/promise%E5%8E%9F%E7%90%86%E6%8E%A2%E7%A9%B6/ 观看
Promise是个什么玩意,大家都知道,度娘告诉我,以同步方式书写异步,解决回调地狱。。。
状态机
早闻Promise的大名,简单介绍,根据状态改变来执行相应处理函数。
Promise的状态极其简单,只有 “pending”, “resolved”, “rejected”三种状态
然后就是如何实现的问题,最关键的当然是监听到状态的更新,然后才能做出回应,那么如何知道状态变了呢?
最初单纯的我开了一个脑洞,有以下想法:
- 写一个定时器不断查询状态值,如果有变化,那么执行回调
- 利用ES5的 Object.defineProperty(obj, prop, descriptor)来追踪状态变化。
- 直接修改状态为指定值,然后接着执行回调
呜呜呜,有时候总会犯傻不是,上面第一种维护一个定时器,效率低下;第二种把状态变得很麻烦和复杂;
其实很多事情之所以复杂,是因为我们想的太多。
Promise根本没那么复杂,就三个状态,搞毛线定时器,状态跟踪。
利用观察者模式,只需要通过特定书写方式注册对应状态的事件处理函数,然后更新状态,调用注册过的处理函数即可。这个特定方式就是 then ,done ,fail, always…等方法;更新状态触发时机就是resolve, reject方法。
简单实现
理论分析:
- 写一个类对象,维护一个 state,值有3种:”pending”, “resolved”, “rejected”
- 通过then done fail always方法注册回调处理函数
- 通过resolve reject分别更新对应状态,并且调用注册函数
代码如下:
/**
* [3种状态]
* @type {String}
*/ var PENDING = "pending";
var RESOLVED = "resolved";
var REJECTED = "rejected";
/**
* [Promise类实现]
* 构造函数传入一个fn,有两个参数,resolve:成功回调; reject:失败回调;
* state: 状态存储
* doneList: 成功处理函数列表
* failList: 失败处理函数列表
* done: 注册成功处理函数
* fail: 注册失败处理函数
* then: 同时注册成功和失败处理函数
* always: 一个处理注册到成功和失败,都会调用
* resolve: 更新state为:RESOLVED,并且执行成功处理队列
* reject: 更新state为:REJECTED,并且执行失败处理队列
*/
var Promise = (function (){
function Promise(fn){
this.state = PENDING;
this.doneList = [];
this.failList = [];
this.fn = fn;
this.fn(this.resolve.bind(this), this.reject.bind(this))
} var p = {
done: function (cb){
if(typeof cb == "function")
this.doneList.push(cb)
return this;
},
fail: function(cb){
if(typeof cb == "function")
this.failList.push(cb);
return this;
},
then: function(success, fail){
this.done(success || noop).fail(fail || noop)
return this;
},
always: function(cb){
this.done(cb).fail(cb)
return this;
},
resolve: function(){
this.state = RESOLVED;
var lists = this.doneList;
for(var i = 0, len = lists.length; i<len; i++){
lists[0].apply(this, arguments);
lists.shift();
}
return this;
},
reject: function(){
this.state = REJECTED;
var lists = this.failList;
for(var i = 0, len = lists.length; i<len; i++){
lists[0].apply(this, arguments);
lists.shift();
}
return this;
}
}
for(var k in p){
Promise.prototype[k] = p[k]
} return Promise;
})(); function noop(){}
使用方式,请到https://github.com/donglegend/MyPromise下载使用
源码下载
Promise 原理探究及其简单实现的更多相关文章
- Promise原理探究及实现
前言 作为ES6处理异步操作的新规范,Promise一经出现就广受欢迎.面试中也是如此,当然此时对前端的要求就不仅仅局限会用这个阶段了.下面就一起看下Promise相关的内容. Promise用法及实 ...
- Promise学习探究
学习熟知吧,原理还是继续吧 例子1: var isGeted; function getRet(){ return new Promise(function(resolve, reject) { // ...
- Promise原理 && 简单实现
Promise原理 参考https://github.com/chunpu/promise/blob/master/promise.js 个人认为原博的实现有点问题 在next函数的实现上, 会导致无 ...
- [原] KVM 虚拟化原理探究(6)— 块设备IO虚拟化
KVM 虚拟化原理探究(6)- 块设备IO虚拟化 标签(空格分隔): KVM [toc] 块设备IO虚拟化简介 上一篇文章讲到了网络IO虚拟化,作为另外一个重要的虚拟化资源,块设备IO的虚拟化也是同样 ...
- [原] KVM 虚拟化原理探究(4)— 内存虚拟化
KVM 虚拟化原理探究(4)- 内存虚拟化 标签(空格分隔): KVM 内存虚拟化简介 前一章介绍了CPU虚拟化的内容,这一章介绍一下KVM的内存虚拟化原理.可以说内存是除了CPU外最重要的组件,Gu ...
- [原] KVM 虚拟化原理探究(2)— QEMU启动过程
KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...
- 弱类型变量原理探究(转载 http://www.csdn.net/article/2014-09-15/2821685-exploring-of-the-php)
N首页> 云计算 [问底]王帅:深入PHP内核(一)——弱类型变量原理探究 发表于2014-09-19 09:00| 13055次阅读| 来源CSDN| 36 条评论| 作者王帅 问底PHP王帅 ...
- promise原理
简介 Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算.一个Promise对象代表着一个还未完成,但预期将来会完成的操作.Promise 对象是一个返 ...
- 这一次,彻底弄懂 Promise 原理
作者声明 本人将迁移至个人公众号「前端Q」及「掘金」平台写文章.博客园的文章将不再及时更新发布.欢迎大家关注公众号「前端Q」及我的掘金主页:https://juejin.im/user/5874526 ...
随机推荐
- 常见linux命令释义(第七天)——ulimit 与变量内容的删除替代与替换。
linux是一个多用户多任务的系统,不同于windows的单人多任务操作系统.再linux上,在同一个时间点上,可以有多个人同时执行多个任务. 那么假若有10个用户,同时打开了100个100M的文件. ...
- Vector & ArrayList 的主要区别
1) 同步性:Vector是线程安全的,也就是说是同步的 ,而ArrayList 是线程序不安全的,不是同步的 数2. 2)数据增长:当需要增长时,Vector默认增长为原来一倍 ,而ArrayLis ...
- DNS介绍
DNS出现及演化 网络出现的早期 是使用IP地址通讯的,那时就几台主机通讯.但是随着接入网络主机的增多,这种数字标识的地址非常不便于记忆,UNIX上就出现了建立一个叫做hosts的文件(Linux和w ...
- JAVA通过md5方法进行加密
import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; /* * MD5 算法 * */ ...
- Ztree的简单使用和后台交互的写法(一)
一.引入ztree的头文件 <!-- 引入ztree/--> <script type="text/javascript" src="${pageCon ...
- C#----XML操作小结
结点和元素的区别: * 结点和元素的区别: * 结点包括元素,结点可以是一个文本,也可以是一个属性,结点包括的类型在XmlNodeType中总结. * <root id="这是一个 ...
- 移动端a标签点击图片有阴影处理
移动端我们在点击页面中的一些图片的时候会出现阴影.处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-ca ...
- 在Nginx服务器中设置多个站点
这里以配置1个站点(1个域名)为例,n 个站点可以相应增加调整, 假设:IP地址: 127.0.0.1域名1 phpmyadmin.zhengwen.cn 放在 /www/phpmyadmin.zhe ...
- Occlusion Culling
遮挡剔除 http://www.bjbkws.com/online/1092/ unity遮挡剔除(应用) http://www.unitymanual.com/thread-37302-1-1.ht ...
- struts2.3.16所需的基本的jar包---------SSH升级包不是整体全部都升级的
struts2.3.16所需的基本的jar包 jar包放多了就报Exception什么Unable to load....上网搜了半天也没有能解决的 下面所说的jar包放到WEB-INF/lib以 ...