媒介
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下载运用