JavaScript异步回调的Promise模式封装实例


Posted in Javascript onJune 07, 2014

网页的交互越来越复杂,JavaScript 的异步操作也随之越来越多。如常见的 ajax 请求,需要在请求完成时响应操作,请求通常是异步的,请求的过程中用户还能进行其他的操作,不会对页面进行阻塞,这种异步的交互效果对用户来说是挺有友好的。但是对于开发者来说,要大量处理这种操作,就很不友好了。异步请求完成的操作必须预先定义在回调函数中,等到请求完成就必须调用这个函数。这种非线性的异步编程方式会让开发者很不适应,同时也带来了诸多的不便,增加了代码的耦合度和复杂性,代码的组织上也会很不优雅,大大降低了代码的可维护性。情况再复杂点,如果一个操作要等到多个异步 ajax 请求的完成才能进行,就会出现回调函数嵌套的情况,如果需要嵌套好几层,那你就只能自求多福了。
先看看下面这个常见的异步函数。

var showMsg = function(){
    setTimeout(function(){
        alert( 'hello' );
    }, 5000 );
};

如果要给该函数添加回调,通常会这么干。

var showMsg = function( callback ){
    setTimeout(function(){
        alert( 'hello' );
        // 此处添加回调
        callback();
    }, 5000 );
};

如果是使用 easy.js 的 Promise,添加回调的方法就会优雅多了,前提是需要将原函数封装成一个 promise 实例。

var showMsg = function(){
    // 构造promise实例
    var promise = new E.Promise();    setTimeout(function(){
        alert( 'hello' );
        // 改变promise的状态
        promise.resolve( 'done' );
    }, 5000 );
    // 返回promise实例
    return promise;
};

将一个普通的函数封装成一个 promise 实例,有3个关键步骤,第一步是在函数内部构造一个 promise 实例,第二步是部署函数执行完去改变 promise 的状态为已完成,第三步就是返回这个 promise 实例。每个 promise 实例都有3种状态,分别为 pending(未完成)、resolved(已完成,成功)、rejected(已拒绝,失败)。下面再来看看如何添加回调。

showMsg().then(function( str ){
    // 回调添加到这里来了
    callback( str );
});

这样就将回调函数和原来的异步函数彻底的分离了,从代码组织上看,优雅了很多。resolve 接受一个参数,该参数就可以轻松实现将数据传送给使用 then 方法添加的回调中。
对于 ajax 请求,easy.js 直接将 ajax 方法封装成了 promise 对象,可以直接添加 then 方法来回调。

E.ajax({
    url : 'test1.php',
    type : 'GET'
})
.then(function(){
    // 添加请求成功的回调
}, function(){
    // 添加请求失败的回调
});

then 方法接受2个函数作为参数,第一个函数是已完成的回调,第二个就是已失败的回调。
如果有上面提到的多个 ajax 请求的情况呢?那么就要用到 when 这个方法了。该方法可以接受多个 promise 实例作为参数。

var requests = E.when(E.ajax({
    url : 'test1.php',
    type : 'GET'
}), E.ajax({
    url : 'test2.php',
    type : 'GET'
}));
requests.then(function( arg1, arg2 ){
    console.log( 'success:' + arg1[0] + arg2[0] );
}, function( arg1, arg2 ){
    console.log( 'failure:' + arg1 + arg2  );
});

when 方法是将多个 promise 实例存到一个数组中,等到该数组的所有 promise 实例都是已完成状态才去执行已完成的回调,一旦有一个实例是已拒绝的状态,则立即执行已拒绝的回调。

Promise 模式是 CommonJS 的规范之一。很多主流的 JavaScript 库都有相应的实现,如 jQuery 和 Dojo 中,都有 Deferred 去实现这些功能。在这里还是要吐槽下 jQuery 的 Deferred,撇开其内部使用,这应该用户使用率最低的一个模块了,这和其较复杂的使用方式有一定的关系。

Javascript 相关文章推荐
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
纯js实现倒计时功能
Jan 06 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery的缓存机制浅析
Jun 07 #Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 #Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 #Javascript
判断iframe里的页面是否加载完成
Jun 06 #Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 #Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 #Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
php实现购物车功能(下)
2016/01/05 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP Include文件实例讲解
2019/02/15 PHP
php7 新增功能实例总结
2020/05/25 PHP
js 操作符实例代码
2009/10/24 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
用innerhtml提高页面打开速度的方法
2013/08/02 Javascript
javascript实现微信分享
2014/12/23 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
Javascript的this用法
2017/01/16 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python能在浏览器能运行吗
2020/06/17 Python
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
家长会开场白和结束语
2015/05/29 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python