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 相关文章推荐
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
小程序实现单选多选功能
Nov 04 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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中使用Oracle数据库(5)
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php生成验证码函数
2015/10/20 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python中使用item()方法遍历字典的例子
2014/08/26 Python
python里大整数相乘相关技巧指南
2014/09/12 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
python线程join方法原理解析
2020/02/11 Python
Python callable内置函数原理解析
2020/03/05 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
一些Solaris面试题
2013/03/22 面试题
自荐信格式简述
2014/01/25 职场文书
转预备党员政审材料
2014/02/06 职场文书
护士自荐信范文
2015/03/25 职场文书
检讨书格式范文
2015/05/07 职场文书
闪闪的红星观后感
2015/06/08 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript