Promise in AngularJS-程序员宅基地

技术标签： 前端开发  promise  angularjs  

What's promise

Angular’s event system provides a lot of power to our Angular apps. One of the most powerful features that it enables is automatic resolution of promises.

Promises are a method of resolving a value or not in an asynchronous manner. Promises are objects that represent the return value or a thrown exception that a function may eventually provide.

Promises are incredibly useful in dealing with remote objects and we can think of them as a proxy for them.

 
Promises are first-class objects and carry with them a few  guarantees:
  • Only one resolve or reject will ever be called
– resolve will be called with a single fulfillment value
– reject will only be called with a single rejection reason
  • If the promise has been resolved or rejected, any handlers depending upon them will still be called
  • Handlers will always be called asynchronously
Additionally, we can also chain promises and allow the code to process as it will normally would run. Exceptions from one promise bubble up through the entire promise chain.
They are always asynchronous, so we can use them in the flow of our code without worry that they will block the rest of the app.

Promise in AngularJS

Angular’s event-loop gives angular the unique ability to resolve promises in it’s $rootScope. $evalAsync stage (see under the hood for more detail on the run loop). The promises will sit inert until the $digest run loop finishes.

bind promise and view directly

This allows for Angular to turn the results of a promise into the view without any extra work. It enables us to assign the result of an XHR call directly to a property on a $scope object and think nothing of it. For instance, we might have a list of friends in a view, like so:

< ul>
  < li ng-repeat= "friend in friends">
     { { friend. name }}
  </ li>
</ ul>
 
If we have a service that returns a promise , we can simply place the promise in the view and expect that Angular will resolve it for us:
angular.module( 'myApp', [])
 .controller( 'DashboardController', [ '$scope',  'UserService',  function($scope, UserService) {
     // UserService's getFriends() method
     // returns a promise
    $scope.friends  = User.getFriends( 123);
 }]);
 
When the asynchronous call to getFriends returns, the $scope.friends value will automatically update the view.
 

How to create a promise

In order to create a promise in Angular, we’ll use the built-in $q service. The $q service provides a few methods in it’s deferred API.

1. inject $q service

First, we’ll need to inject the $q service into our object where we want to use it.

angular.module( 'myApp', [])
   .factory( 'UserService', [ '$q',  function($q) {
    // Now we have access to the $q library
 }]);
 

2. $q.defer()

To created a deferred object, we’ll call the method defer():
var deferred  = $q.defer();
 
The deferred object exposes  three methods and the  single promise property that can be used in dealing with the promise.
  • resolve(value)
The resolve function will resolve the deferred promise with the value.
deferred .resolve({name :  "Ari", username :  "@auser"});
 
  • reject(reason)
This will reject the deferred promise with a reason. This is equivalent to resolving a promise with a rejection
deferred .reject( "Can't update user");
// Equivalent to
deferred.resolve( $q.reject( "Can't update user"));
 
  • notify(value)
This will respond with the status of a promises execution.
TODO: Add notify example
  • promise property
We can get access to the promise as a property on the deferred object:
deferred.promise
 
A full example of creating a function that responds with a promise might look similar to the following method on the UserService as mentioned above.
angular.module( 'UserService', [ '$q',  function($q) {
  var getFriends  =  function(id) {
    var deferred  =  $q.defer();
 
    // Get friends from a remote server
   $http.get( '/user/'  + id  +  '/friends')
   .success( function(data) {
       deferred.resolve(data.friends);
   })
   .error( function(reason) {
       deferred.reject(reason);
   });
 
   return  deferred.promise;
 }
 }]);
 

3. interact with promise

Now we can use the promise API to interact with the getFriends() promise.
In the case of the above service, we can interact with the promise in two different ways.
  • then(successFn, errFn, notifyFn)
Regardless of the success or failure of the promise, then will call either the  successFn or the  errFnasynchronously as soon as the result is available. The callbacks are always called with a single argument: the result or the rejection reason.
The  notifyFn callback may be called zero or more times to provide a progress status indication before the promise is resolved or rejected.

The then() method always returns a new promise which is either resolved or rejected through the return value of the successFn or the errFn. It also notifies through the notifyFn.

  • catch(errFn)
This is simply a helper function that allows for us to replace the err callback with  .catch(function(reason){}):
$http.get( '/user/'  + id  +  '/friends')
 . catch( function(reason) {
    deferred.reject(reason);
 });
 
  • finally(callback)
This allows you to observe the fulfillment or rejection of a promise, but without modifying the result value. This is useful for when we need to release a resource or run some clean-up regardless of the success/error of the promise.
We cannot call this directly due to finally being a reserved word in IE javascript. To use finally, we have to call it like:
promise[ 'finally']( function() {});
 
 
Angular’s $q deferred objects are chainable in that even then returns a promise. As soon as the promise is resolved, the promise returned by then is resolved or rejected.
These promise chains are how Angular can support $http’s interceptors.
The $q service is similar to the original Kris Kowal’s Q library:
  1. $q is integrated with the angular $rootScope model, so resolutions and rejections happen quickly inside the angular
  2. $q promises are integrated with angular’s templating engine which means that any promises that are found in the views will be resolved/rejected in the view
  3. $q is tiny and doesn’t contain the full functionality of the Q library

$q library

The $q library comes with several different useful methods.

all(promises)

If we have multiple promises that we want to  combine into a single promise, then we can use the $q.all(promises) method to combine them all into a single promise. This method takes a single argument:
promises (array or object of promises)
 
Promises as an array or hash of promises
The all() method returns a single promise that will be resolved with an array or hash of values. Each value will correspond to the promises at the same index/key in the promises hash. If any of the promises are resolved with a rejection, then the resulting promise will be rejected as well.

defer()

The defer() method creates a deferred object. It takes no parameters. It returns a new instance of a single deferred object.

reject(reason)

This will create a promise that is resolved as rejected with a specific reason. This is specifically designed to give us access to forwarding rejection in a chain of promises.

This is akin to throw in javascript. In the same sense that we can catch an exception in javascript and we can forward the rejection, we’ll need to rethrow the error. We can do this with $q.reject(reason).

This method takes a single parameter:

reason (constant, string, exception, object)
The reasons for the rejection.
This reject() method returns a promise that has already been resolved as rejected with the reason.

when(value)

The when() function wraps an object that might be a value then-able promise into a $q promise.  This allows for us to deal with an object that may or may not be a promise.
The when() function takes a single parameter:
value
This is the value or a promise
The when() function returns a promise that can be then used like any other promise.
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/offbye/article/details/38413759

智能推荐

苹果https java_apple登录 后端java实现最终版-程序员宅基地

文章浏览阅读298次。import com.alibaba.fastjson.JSONArray;import com.alibaba.fastjson.JSONObject;import com.auth0.jwk.Jwk;import com.helijia.appuser.modules.user.vo.AppleCredential;import com.helijia.common.api.model.Api..._com.auth0.jwk.jwk

NLP学习记录（六）最大熵模型MaxEnt_顺序潜在最大熵强化学习(maxent rl)-程序员宅基地

文章浏览阅读4.7k次。原理在叧掌握关于未知分布的部分信息的情况下，符合已知知识的概率分布可能有夗个，但使熵值最大的概率分布最真实地反映了事件的的分布情况，因为熵定义了随机变量的不确定性，弼熵值最大时，随机变量最不确定，最难预测其行为。最大熵模型介绍我们通过一个简单的例子来介绍最大熵概念。假设我们模拟一个翻译专家的决策过程，关于英文单词in到法语单词的翻译。我们的翻译决策模型p给每一个单词或短语分配一..._顺序潜在最大熵强化学习(maxent rl)

计算机毕业设计ssm科研成果管理系统p57gs系统+程序+源码+lw+远程部署-程序员宅基地

文章浏览阅读107次。计算机毕业设计ssm科研成果管理系统p57gs系统+程序+源码+lw+远程部署。springboot基于springboot的影视资讯管理系统。ssm基于SSM高校教师个人主页网站的设计与实现。ssm基于JAVA的求职招聘网站的设计与实现。springboot校园头条新闻管理系统。ssm基于SSM框架的毕业生离校管理系统。ssm预装箱式净水站可视化信息管理系统。ssm基于SSM的网络饮品销售管理系统。

Caused by: org.xml.sax.SAXParseException; lineNumber: 38; columnNumber: 9; cvc-complex-type.2.3: 元素_saxparseexception; linenumber: 35; columnnumber: 9-程序员宅基地

文章浏览阅读1.6w次。不知道大家有没有遇到过与我类似的报错情况，今天发生了此错误后就黏贴复制了报错信息“Caused by: org.xml.sax.SAXParseException; lineNumber: 38; columnNumber: 9; cvc-complex-type.2.3: 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”。”然后就是一顿的百度啊， 可一直都没有找到..._saxparseexception; linenumber: 35; columnnumber: 9; cvc-complex-type.2.3:

计算机科学与技术创新创业意见,计算机科学与技术学院大学生创新创业工作会议成功举行...-程序员宅基地

文章浏览阅读156次。(通讯员 粟坤萍 2018-04-19)4月19日，湖北师范大学计算机科学与技术学院于教育大楼学院会议室1110成功召开大学生创新创业工作会议。参与本次会议的人员有党总支副书记黄海军老师，创新创业学院吴杉老师，计算机科学与技术学院创新创业活动指导老师，15、16、17级各班班主任及学生代表。首先吴杉老师介绍了“互联网+”全国大学生创新创业大赛的相关工作进度，动员各级班主任充分做好“大学生创新创业大..._湖北师范 吴杉

【Android逆向】爬虫进阶实战应用必知必会-程序员宅基地

文章浏览阅读1.1w次，点赞69次，收藏76次。安卓逆向技术是一门深奥且充满挑战的领域。通过本文的介绍，我们了解了安卓逆向的基本概念、常用工具、进阶技术以及实战案例分析。然而，逆向工程的世界仍然在不断发展和变化，新的技术和方法不断涌现。展望未来，随着安卓系统的不断更新和加固，逆向工程将面临更大的挑战。同时，随着人工智能和机器学习技术的发展，我们也许能够看到更智能、更高效的逆向工具和方法的出现。由于篇幅限制，本文仅对安卓逆向技术进行了介绍和案例分析。

随便推点

Python数据可视化之环形饼图_数据可视化绘制饼图或圆环图-程序员宅基地

文章浏览阅读1.1k次。制作饼图还需要下载pyecharts库，Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。随着学习python的热潮不断增加，Python数据可视化也不停的被使用，那我今天就介绍一下Python数据可视化中的饼图。在我们的生活和学习中，编程是一项非常有用的技能，能够丰富我们的视野，为各行各业的领域提供了新的角度。环形饼图的制作并不难，主要是在于数据的打包和分组这里会有点问题，属性的标签可以去 这个网站进行修改。图中的zip压缩函数，并分组打包。_数据可视化绘制饼图或圆环图

SpringMVC开发技术~5~基于注解的控制器_jsp/servlet到controller到基于注解的控制器-程序员宅基地

文章浏览阅读325次。1 Spring MVC注解类型Controller和RequestMapping注释类型是SpringMVC API最重要的两个注释类型。基于注解的控制器的几个优点：一个控制器类可以控制几个动作，而一个实现了Controller接口的控制器只能处理一个动作。这就允许将相关操作写在一个控制器类内，从而减少应用类的数量基于注解的控制器的请求映射不需要存储在配置文件中，而是使用RequestM..._jsp/servlet到controller到基于注解的控制器

利用波特图来满足动态控制行为的要求-程序员宅基地

文章浏览阅读260次，点赞3次，收藏4次。相位裕量可以从增益图中的交越频率处读取（参见图2）。使用的开关频率、选择的外部元件（例如电感和输出电容），以及各自的工作条件（例如输入电压、输出电压和负载电流）都会产生巨大影响。图2所示为波特图中控制环路的增益曲线，其中提供了两条重要信息。对于图2所示的控制环路，这个所谓的交越频率出现在约80 kHz处。通过使用波特图，您可以查看控制环路的速度，特别是其调节稳定性。图2. 显示控制环路增益的波特图（约80 kHz时，达到0 dB交越点）。图3. 控制环路的相位曲线，相位裕量为60°。

Glibc Error: `_obstack@GLIBC_2.2.5‘ can‘t be versioned to common symbol ‘_obstack_compat‘_`_obstack@glibc_2.2.5' can't be versioned to commo-程序员宅基地

文章浏览阅读1.8k次。Error: `_obstack@GLIBC_2.2.5’ can’t be versioned to common symbol '_obstack_compat’原因：https://www.lordaro.co.uk/posts/2018-08-26-compiling-glibc.htmlThis was another issue relating to the newer binutils install. Turns out that all was needed was to initi_`_obstack@glibc_2.2.5' can't be versioned to common symbol '_obstack_compat

基于javaweb+mysql的电影院售票购票电影票管理系统(前台、后台)_电影售票系统javaweb-程序员宅基地

文章浏览阅读3k次。基于javaweb+mysql的电影院售票购票电影票管理系统(前台、后台)运行环境Java≥8、MySQL≥5.7开发工具eclipse/idea/myeclipse/sts等均可配置运行适用课程设计，大作业，毕业设计，项目练习，学习演示等功能说明前台用户：查看电影列表、查看排版、选座购票、查看个人信息后台管理员：管理电影排版，活动，会员，退票，影院，统计等前台：后台：技术框架_电影售票系统javaweb

分分钟拯救监控知识体系-程序员宅基地

文章浏览阅读95次。分分钟拯救监控知识体系本文出自：http://liangweilinux.blog.51cto.com0 监控目标我们先来了解什么是监控，监控的重要性以及监控的目标，当然每个人所在的行业不同、公司不同、业务不同、岗位不同、对监控的理解也不同，但是我们需要注意，监控是需要站在公司的业务角度去考虑，而不是针对某个监控技术的使用。监控目标1.对系统不间断实时监控:实际上是对系统不间..._不属于监控目标范畴的是 实时反馈系统当前状态

推荐文章

热门文章

相关标签