By
donglegend
更新日期:
Promise是个什么玩意,大家都知道,度娘告诉我,以同步方式书写异步,解决回调地狱。。。
状态机
早闻Promise的大名,简单介绍,根据状态改变来执行相应处理函数。
Promise的状态极其简单,只有 “pending”, “resolved”, “rejected”三种状态
然后就是如何实现的问题,最关键的当然是监听到状态的更新,然后才能做出回应,那么如何知道状态变了呢?
最初单纯的我开了一个脑洞,有以下想法:
呜呜呜,有时候总会犯傻不是,上面第一种维护一个定时器,效率低下;第二种把状态变得很麻烦和复杂;
其实很多事情之所以复杂,是因为我们想的太多。
Promise根本没那么复杂,就三个状态,搞毛线定时器,状态跟踪。
利用观察者模式,只需要通过特定书写方式注册对应状态的事件处理函数,然后更新状态,调用注册过的处理函数即可。这个特定方式就是 then ,done ,fail, always…等方法;更新状态触发时机就是resolve, reject方法。
简单实现
理论分析:
- 写一个类对象,维护一个 state,值有3种:”pending”, “resolved”, “rejected”
- 通过then done fail always方法注册回调处理函数
- 通过resolve reject分别更新对应状态,并且调用注册函数
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
|
var PENDING = "pending"; var RESOLVED = "resolved"; var REJECTED = "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下载使用