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

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时，向何处发送表单中的数据，地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一：用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头，使全列成选中状态，然后粘贴，最后commit提交即可。（前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明：转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签