当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

AngularJS中的Promise

发表于: 2014-08-25   作者:bijian1013   来源:转载   浏览:
摘要: 一.Promise         Promise是一个接口,它用来处理的对象具有这样的特点:在未来某一时刻(主要是异步调用)会从服务端返回或者被填充属性。其核心是,promise是一个带有then()函数的对象。         为了展示它的优点,下面来看一个例子,其中需要获取用户当前的配置文件: var cu

一.Promise

        Promise是一个接口,它用来处理的对象具有这样的特点:在未来某一时刻(主要是异步调用)会从服务端返回或者被填充属性。其核心是,promise是一个带有then()函数的对象。

        为了展示它的优点,下面来看一个例子,其中需要获取用户当前的配置文件:

var currentProfile = null;
var username = 'something';

fetchServerConfig(function(serverConfig) {
    fetchUserProfiles(serverConfig.USER_PROFILES, username,
         function(profiles) {
             currentProfile = profiles.currentProfile;
     });
});

        上面这种处理方式存在一些问题:

1.对于代码缩进来说,这种代码就是一个噩梦,尤其在你需要链式调用很多次的时候;

2.处于回调和函数之间的错误报告非常容易丢失,除非你在每一个步骤中都手动处理错误;

3.如果需要使用currentProfile对象来做一些事情,那么你需要在最内层的回调中封装真正想要实现的逻辑,要么直接封装,要么通过一个单独的函数来封装。

        Promise机制可以很好地解决这些问题。在深入了解其运行机制之前,我们来看看如何使用promise实现同样的事情:

var currentProfile = 
    fetchServerConfig().then(function(serverConfig) {
       return fetchUserProfiles(serverConfig.USER_PROFILES, username);
    }).then(function(profiles) {
       return profiles.currentProfile;
    },function(error) {
       //可以在这里处理错误,在fetchServerConfig或者fetchUserProfiles中处理都可以
    });

        使用promise机制的优点如下:

1.可以对函数进行链式调用,所以你不会陷入代码缩进噩梦中;

2.在调用链的过程中,可以保证上一个函数调用完成之后才会调用下一个函数;

3.每一个then()调用都带有两个参数(两个都是函数)。第一个是成功之后的回调,第二个是出错之后的处理器;

4.如果调用链中出现了错误,错误将会被冒泡传递到其余的错误处理函数中。所以,最终来说,所有错误都可以在任意一个回调函数中进行处理。

        你可能会问,resolve(解决)方法和reject(拒绝)方法又是什么呢?在AngularJS中,延迟调用是实现promise的一种方式。调用resolve方法将会填充promise(也就是调用success处理函数),而调用reject方法将会调用promise的错误处理函数。

 

二.$q和Promise

        Promise接口是AngularJS组织API的基础,从根本上讲,Promise接口从以下方面对异步请求做了规范:

        a.异步请求返回一个promise,而不是返回具体值;

        b.Promise带有一个then函数,这个函数有两个参数:第一个参数是处理"resolved"和"sucess"事件的函数;第二个参数是处理"rejected"和"failure"事件的函数。调用这两个函数时将会把结果或者拒绝的原因作为参数传递进去;

        c.只要返回结果是合法的,接口就可以保证这两个函数中的一个会被调用。

        大多数deferred/Q实现都会遵守以上方式,但是AngularJS的实现比较特殊,原因如下:

        a.AngularJS知道$q的存在,所以$q会被整合到作用域模型中去。这样可以使解析时的传递速度更快,并且可以减少UI的闪烁和刷新;

        b.AngularJS的模板也认识$q,这样一来,接口的内容就可以被当作最终结果值(而不是当作promise)来对待,然后等获取结果之后再通知promise;

        c.体积更小,因为对于常用的异步任务来说,AngularJS只实现了它们所需要的最基本、最重要的功能。

        我们来看一段代码:

fetchUser(function(user) {
    fetchUserPermissions(user, function(permissions) {
        fetchUserListData(user, permissions, function(list) {
            //对你想要显示的数据列表做一些处理
        });
    });
});

        使用JavaScript时,人们经常会抱怨这种可怕的、金字塔的代码缩进噩梦。从本质上来说,异步返回的方式和程序的同步处理之间存在冲突,从而导致了多重嵌套的函数,这样就更难跟踪到当前的上下文了。

        另外,对错误的处理也存在同样的问题。处理错误的最佳方式是什么?你会在每一个步骤中都处理错误吗?那样会把代码搞得一团糟。

        为了解决这一问题,Promise方案提供了then的概念,在成功的情况下会执行一个函数,在出错的情况下执行另一个函数,两个函数都可以进行链式调用。所以,对于上面这段代码,如果使用Promise API(至少使用AngularJS的实现),可以这样展开:

var deferred = $q.defer();

var fetchUser = function() {
     //在进行异步调用之后,使用响应值调用deferred.resolve
     deferred.resolve(user);
     
     //在出错的情况下调用
     deferred.reject('Reason for failure');
}
//类似地,处理fetchUserPermissions和fetchUserListData

deferred.promise.then(fetchUser)
   .then(fetchUserPermissions)
   .then(fetchUserListData)
   .then(function(list) {
        //处理数据列表
   },function(errorReason( {
       //在任何一个步骤中所发生的错误,都可以在这里处理
});

        整个金字塔式的代码就被很好的平坦化了,并且提供了链式的作用域,以及一个单一的出错处理点。你可以在应用中使用同样的代码来处理异步调用,只要导入AngularJS的$q服务即可。

 

三.拦截响应

        Promise机制还可以做一些非常酷的事情:拦截响应。

        我们已经学过的内容有:向服务端发送请求、处理响应、把响应很好地包装成抽象的东西及处理异步调用。但是在真实的应用中,对于每一次服务端调用,最终还必须做一些通用的操作,例如错误处理、鉴权以及其他安全方面的处理(例如剪裁数据)。

        在深入理解了$q接口之后,我们就可以使用拦截响应的方式来处理以上所有任务了。响应拦截的机制允许我们在响应到达应用之前对其进行拦截,并在上面进行一些操作,例如转换数据形式、处理错误等所有你能想到的操作。

        下面来看一个例子,它会拦截响应,然后做一些很小的数据转换操作。

//把拦截器注册为一个服务
myModule.factory('myInterceptor', function($q, notifyService, errorLog) {
     return function(promise) {
          return promise.then(function(response) {
               //什么都不做
               return response;
          }, function(response) {
               //notify服务将会使用错误信息来刷新UI
               notifyService(response);
               //同时把错误信息打印到控制台,以便调试
               errorLog(response);
               return $q.reject(response);
          });
     }
});

//确保我们所创建的拦截器是拦截器链的一部分
$httpProvider.responseInterceptors.push('myInterceptor');

 

资料来源:《用AngularJS开发下一代Web应用》

AngularJS中的Promise

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
今天做一个项目,展现一个页面需要从服务器请求两次数据,太繁琐了,今天用promise规范了一下,只需
$location服务是对所有浏览器中都存在的window.location对象的封装。那么,为什么需要使用$location
$http服务提供了一个非常低级的实现,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活
对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其
真正的应用需要和真实的服务器进行交互,无论你是想把数据持久化到云端,还是需要与其他用户进行实
一.使用$watch监控数据模型的变化 在scope内置的所有函数中,用得最多的可能就是$watch函数了,当你
真正的应用需要和真实的服务器进行交互,无论你是想把数据持久化到云端,还是需要与其他用户进行实
$location服务是对所有浏览器中都存在的window.location对象的封装。那么,为什么需要使用$location
$http服务提供了一个非常低级的实现,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活
一.使用$watch监控数据模型的变化 在scope内置的所有函数中,用得最多的可能就是$watch函数了,当你
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号