Promise in 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.
- 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
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:
<
li ng-repeat=
"friend in friends">
{{ friend.
name }}
</
li>
</
ul>
'myApp', [])
.controller(
'DashboardController', [
'$scope',
'UserService',
function($scope, UserService) {
// UserService's getFriends() method
// returns a promise
$scope.friends
= User.getFriends(
);
}]);
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.
'myApp', [])
.factory(
'UserService', [
'$q',
function($q) {
// Now we have access to the $q library
}]);
2. $q.defer()
= $q.defer();
three methods and the
single promise property that can be used in dealing with the promise.
resolve(value)
.resolve({name
:
"Ari", username
:
"@auser"});
reject(reason)
.reject(
"Can't update user");
// Equivalent to
deferred.resolve(
$q.reject(
"Can't update user"));
notify(value)
promise property
'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
then(successFn, errFn, notifyFn)
successFn or the
errFn asynchronously as soon as the result is available. The callbacks are always called with a single argument: the result or the rejection reason.
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)
.catch(function(reason){}):
'/user/'
+ id
+
'/friends')
.
catch(
function(reason) {
deferred.reject(reason);
});
finally(callback)
'finally'](
function() {});
- These promise chains are how Angular can support $http’s interceptors.
- $q is integrated with the angular $rootScope model, so resolutions and rejections happen quickly inside the angular
- $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
- $q is tiny and doesn’t contain the full functionality of the Q library
$q library
all(promises)
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:
defer()
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:
when(value)
This allows for us to deal with an object that may or may not be a promise.
Promise in AngularJS的更多相关文章
- angularJS中XHR与promise
angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起 ...
- angularJS笔记之Promise
Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的 ...
- 以todomvc为例分析knockout、backbone和angularjs
一.整体结构 项目github地址https://github.com/tastejs/todomvc/ 排除通用的css样式文件和引用的js库文件,仅看html和js 1.1 knockoutjs版 ...
- AngularJS(Part 10)--页面导航
页面导航 过去,一个URL代表一个页面.但是随着Ajax的兴起,情况发生的很大的变化.不同的内容可以使用同一个URL.这让浏览器中的回退.前进甚至收藏按钮都失去了作用.而AngularJS提供 ...
- amgular $q用法
amgular $q用法 在用JQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台 ...
- Angular简单应用剖析
这一篇我们将一起感受学习一个小型的.活生生的应用,而不是继续深入分析哪些单个的特性.我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的.可以运行的应用. GutHub ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
- IT_Qestion
1. Javascript 回调 Promise 2. Angularjs $parent 3. CSS margin padding border 4. Angularjs $filter 5. D ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
随机推荐
- codevs 1128 导弹拦截 (贪心)
/* 题目大体意思是两套系统好多导弹 怎样分配使得两个系统所拦截的最大半径之和最小 贪心:把距离1系统最远的 让2拦截 记好距离 然后按照距离1由远到近排序 对于每一个导弹 如果这之前的都给2拦截 则 ...
- 修改tt模板让ADO.NET C# POCO Entity Generator With WCF Support 生成的实体类继承自定义基类
折腾几天记载一下,由于项目实际需要,从edmx生成的实体类能自动继承自定义的基类,这个基类不是从edmx文件中添加的Entityobject. 利用ADO.NET C# POCO Entity Gen ...
- CSS3新增UI样式
圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下: <head> <meta http-equiv=&q ...
- DEDECMS批量修改默认文章和列表命名规则的方法
很多人因为添加分类而苦恼,尤其是批量添加的时候,必须要重新修改一下文章命名规则和列表命名规则,都是为了做SEO.如果进行默认值的修改,就会事半功倍.不多说. 一.DEDE5.5修改默认文章命名规则. ...
- MVC使用Exception过滤器自定义处理Action的的异常
1.继承FilterAttribute ,IExceptionFilter自定义处理 /// <summary> /// 登录错误自定义处理 /// </summary> pu ...
- 【SQL Server】SQL与Excel的数据互通导入导出
转载至:http://jingyan.baidu.com/article/73c3ce28c839b7e50243d950.html
- Web学习资源及手册查询整理
入门了解html.css.js.jQuery:http://www.w3school.com.cn/, bootstrap.nodejs.php.jQuery入门:http://www.runoob. ...
- dbm数据库
所有版本的linux以及大多数的UNIX版本都随系统带有一个基本的.但却非常搞笑的数据存储历程集,他被称为dbm数据库.适用于存储比较静态的索引化数据库,即使用索引来存储可变长的数据结构,然后通过索引 ...
- 三种php连接access数据库方法
种是利用php的pdo,一种是odbc,com接口来与access数据库连接.利用pdo与access数据库连接 $path ="f:fontwww.jb51.netspiderresult ...
- 人见人爱a*b 杭电2035
求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方” Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果A= ...