浅谈Javascript中Promise对象的实现
来源:互联网 发布:台湾退出联合国知乎 编辑:程序博客网 时间:2024/05/16 09:46
本文同步自我得博客:http://www.joeray61.com
很多做前端的朋友应该都听说过Promise
(或者Deferred
)对象,今天我就讲一下我对Promise
的认识
What?
Promise
是CommonJS
的规范之一,拥有resolve
、reject
、done
、fail
、then
等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套。如今异步在web开发中越来越重要,对于开发人员来说,这种非线性执行的编程会让开发者觉得难以掌控,而Promise
可以让我们更好地掌控代码的执行流程,jQuery
等流行的js库都已经实现了这个对象,年底即将发布的ES6
也将原生实现Promise
Why
想象这样一个场景,两个异步请求,第二个需要用到第一个请求成功的数据,那么我们代码可以这样写
ajax({ url: url1, success: function(data) { ajax({ url: url2, data: data, success: function() { } }); } });
如果继续下去在回调函数中进行下一步操作,嵌套的层数会越来越多。我们可以进行适当的改进,把回调函数写到外面
function A() { ajax({ url: url1, success: function(data) { B(data); } }); } function B(data) { ajax({ url: url2, success: function(data) { ...... } }); }
即使是改写成这样,代码还是不够直观,但是如果有了Promise对象,代码就可以写得非常清晰,一目了然,请看
new Promise(A).done(B);
这样函数B就不用写在A的回调中了
How
目前的ES
标准中还未支持Promise
对象,那么我们就自己动手,丰衣足食吧。思路大致是这样的,用2个数组(doneList
和failList
)分别存储成功时的回调函数队列和失败时的回调队列
state
: 当前执行状态,有pending
、resolved
、rejected
3种取值done
: 向doneList
中添加一个成功回调函数fail
: 向failList
中添加一个失败回调函数then
: 分别向doneList
和failList
中添加回调函数always
: 添加一个无论成功还是失败都会调用的回调函数resolve
: 将状态更改为resolved
,并触发绑定的所有成功的回调函数reject
: 将状态更改为rejected
,并触发绑定的所有失败的回调函数when
: 参数是多个异步或者延迟函数,返回值是一个Promise兑现,当所有函数都执行成功的时候执行该对象的resolve
方法,反之执行该对象的reject
方法
下面是我的具体实现过程:
var Promise = function() { this.doneList = []; this.failList = []; this.state = 'pending';};Promise.prototype = { constructor: 'Promise', resolve: function() { this.state = 'resolved'; var list = this.doneList; for(var i = 0, len = list.length; i < len; i++) { list[0].call(this); list.shift(); } }, reject: function() { this.state = 'rejected'; var list = this.failList; for(var i = 0, len = list.length; i < len; i++){ list[0].call(this); list.shift(); } }, done: function(func) { if(typeof func === 'function') { this.doneList.push(func); } return this; }, fail: function(func) { if(typeof func === 'function') { this.failList.push(func); } return this; }, then: function(doneFn, failFn) { this.done(doneFn).fail(failFn); return this; }, always: function(fn) { this.done(fn).fail(fn); return this; }};function when() { var p = new Promise(); var success = true; var len = arguments.length; for(var i = 0; i < len; i++) { if(!(arguments[i] instanceof Promise)) { return false; } else { arguments[i].always(function() { if(this.state != 'resolved'){ success = false; } len--; if(len == 0) { success ? p.resolve() : p.reject(); } }); } } return p;}
Improve
目前只是实现了Promise
的基础功能,但仍然还有无法处理的情况,例如要实现3个或3个以上的异步请求的串行,目前我的Promise
没有办法支持new Promise(A).then(B).then(C)
这样的形式,jQuery
在1.7的版本中为Deferred
(Promise
)对象实现了pipe
函数,可以通过这个函数实现上述功能,代码为$.Deferred(A).pipe(B).then(C)
,我尝试去读了jQuery
这部分的代码,但是没能读懂,希望有大神能够给一些实现思路
- 浅谈Javascript中Promise对象的实现
- 浅谈Javascript中Promise对象的实现
- JavaScript中对Promise对象的理解
- 浅谈ES6 Promise对象
- JavaScript中Promise的使用
- Javascript 在循环中使用Promise对象
- 通过一道笔试题浅谈javascript中的promise对象
- es6 javascript的Promise对象(上)
- es6 javascript的Promise对象(下)
- JavaScript Promise对象详解
- 【javascript笔记】Promise对象
- 初识Javascript Promise对象
- JavaScript中promise的基本用法
- jQuery中deferred、promise对象的使用
- JavaScript之Promise实现
- JavaScript中Promise详解
- javaScript中Promise详解
- 浅谈Javascript中面向对象之对象
- 正则表达式
- GridView
- 详解spring+webservice接口(axis1方式)
- 李大大SEO:原创内容被抄袭,我们都是受害者
- android byte数组,bitmap,drawable之间的转换
- 浅谈Javascript中Promise对象的实现
- 布局万花筒:UIColletionview
- Android中SQLite数据库中空字符串的判断方式
- tomcat 详解 三catalina.home和catalina.base
- 对H264进行RTP封包原理
- week4、run 4 automation test cases of bright
- 函数指针使用(转)
- 004HTC VIVE拾取东西和触碰
- 缩略词 —— 计算机/编程/互联网/IT