脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Promise模式封装实例

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

 更新时间：2014年06月07日 09:27:15   作者：  
这篇文章主要介绍了JavaScript异步回调的Promise模式封装实例,本文通过分析easyjs的源码得出,实例均参考easyjs,需要的朋友可以参考下

网页的交互越来越复杂，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基础语法学习笔记

    整理Javascript基础语法学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript基础语法，希望大家继续关注
    2015-11-11
  • layui实现给某一列加点击事件

    layui实现给某一列加点击事件

    今天小编就为大家分享一篇layui实现给某一列加点击事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Javascript 判断两个IP是否在同一网段实例代码

    Javascript 判断两个IP是否在同一网段实例代码

    javascript功能的强大之处是我们大家有目共睹的，几天小编向大家介绍Javascript 判断两个IP是否在同一网段，感兴趣的朋友可以参考一下
    2016-11-11
  • javascript表单验证和Window详解

    javascript表单验证和Window详解

    这篇文章主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
    2014-12-12
  • JS校验与最终登陆界面功能完整示例

    JS校验与最终登陆界面功能完整示例

    这篇文章主要介绍了JS校验与最终登陆界面功能,结合完整实例形式详细分析了JavaScript登录界面校验功能与正则验证相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • js chrome浏览器判断代码

    js chrome浏览器判断代码

    今天发现chrome还是有一些独一无二的东西，基于它们，我们就可以搞出基于特征的判定了。
    2010-03-03
  • IE6中链接A的href为javascript协议时不在当前页面跳转

    IE6中链接A的href为javascript协议时不在当前页面跳转

    IE6中当链接A的href为javascript协议时不能在当前页面跳转，本例给出有效的解决方法，大家不妨参考下
    2014-06-06
  • ES6   Promise基础用法(resolve、reject、then、catch,all)

    ES6   Promise基础用法(resolve、reject、then、catch,a

    Promise是JavaScript中处理异步操作的对象,它有三种状态：Pending、Fulfilled、Rejected,使用new Promise创建Promise对象,通过resolve和reject改变状态,then和catch方法用于处理成功和失败的结果,本文介绍ES6 Promise用法,感兴趣的朋友一起看看吧
    2024-09-09
  • 详解js location.href和window.open的几种用法和区别

    详解js location.href和window.open的几种用法和区别

    这篇文章主要介绍了详解js location.href和window.open的几种用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 原生JavaScript创建不可变对象的方法简单示例

    原生JavaScript创建不可变对象的方法简单示例

    这篇文章主要介绍了原生JavaScript创建不可变对象的方法,结合简单实例形式分析了基于原生JavaScript创建不可变对象的相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论