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 相关文章推荐
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
javascript模块化简单解析
Apr 07 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
JS实现标签页切换效果
May 04 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
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使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
python实现simhash算法实例
2014/04/25 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python2.7实现爬虫网页数据
2018/05/25 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python模拟斗地主发牌
2020/04/22 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
信用卡工资证明范本
2014/10/17 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技