Angular通信$q服务和promise对象
promise
约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待、完成或拒绝。约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒绝,它就无法再改变状态。例如我们的$http服务返回的就是一个经过包装的promise对象。
可以看到,黑色部分圈起来的是基本的promise部分,此外$http还提供了success和error的语法糖,我们完全也可以直接使用then方法。
var promise = ...; // 省略$http过程 promise.then(function (data) {
// realData被包含在data的“data”字段中,一般它才是我们想要的
var realData = data.data;
console.log(realData);
}, function (err) { });
这里的then方法定义了未来的某个要执行的回调函数,当promis通过某个方法转换到完成或者拒绝状态时,回调函数就会被调用,在下面说$q服务的时候会详细介绍。
then方法会返回一个promise对象,所以可以链式调用,另外它返回的值会传递给下一个then函数。
promiseA
.then(function(val){$log.info(val);return ++val;})
.then(function(val){$log.info(val);return ++val;})
.then(
function(val){$log.info(val);return ++val;},
function(val){$log.info(val)}
);
如果第一个then传入的val = 1,那么最终输入:1,2,3。
$q服务
$q服务有4个方法函数
$q.defer(),返回一个deferred对象。
$q.reject(),返回一个失败原因,promise.then()执行失败回调。
$q.all(promises),多个promise必须执行成功,才能执行成功回调,传递值为数组或哈希值,数组中每个值为与Index对应的promise对象。
$q.when(value),传递变量值,promise.then()执行成功回调。
- resolve用来解决一个promise,也就是把promise转换成完成状态。
- reject用来拒绝一个promise,也就是把promise转换成拒绝状态。
- notify用于promise执行时更新状态,用来显示进度之类的。
/ 为了演示的目的,此处我们假设 `$q`, `scope` 以及 `okToGreet` 引用 在当前执行环境中可用
// (比如他们已经被注入,或者被当做参数传进来了). function asyncGreet(name) {
var deferred = $q.defer(); setTimeout(function() {
// 因为此function 在未来的事件循环中异步执行,
// 我们需要把代码包装到到一个 $apply 调用中,以便正确的观察到 model 的改变
scope.$apply(function() {
deferred.notify('即将问候 ' + name + '.'); if (okToGreet(name)) {
deferred.resolve('你好, ' + name + '!');
} else {
deferred.reject('拒绝问候 ' + name + ' .');
}
});
}, 1000); return deferred.promise;
} var promise = asyncGreet('小漠漠');
promise.then(function(greeting) {
alert('成功: ' + greeting);
}, function(reason) {
alert('失败鸟: ' + reason);
}, function(update) {
alert('收到通知: ' + update);
});
链式调用内部的默认失败回调会向后传递异常,所以为避免麻烦,且不在意每一处的业务逻辑错误,不要在每一处then()
处声明异常处理函数,在最后一个then()
中声明即可。
var deferred = $q.defer();
deferred.resolve(1);
var promiseA = deferred.promise;
promiseA
.then(function(val){$log.info(val);return ++val;})
.then(function(val){$log.info(val);return ++val;})
.then(
function(val){$log.info(val);return ++val;},
function(val){$log.info(val)}
);
链式调用完成后控制台打印出 1,2,3
var deferred = $q.defer();
deferred.resolve(1);
var promiseA = deferred.promise;
promiseA
.then(function(val){$log.info(val);return $q.reject(15);})
.then(function(val){$log.info(val);return ++val;})
.then(function(val){$log.info(val);return ++val;})
.then(function(val){$log.info(val);return ++val;})
.then(
function(val){$log.info(val);return ++val;},
function(val){$log.info(val)}
);
链式调用完成后控制台打印出 1,15,可以看出,第一个return $q.reject(15)
之后,直到最后一个then()
才有错误回调函数,所以异常一直传递到最后,中间的几个then()
没有错误回调函数。
var promiseA = $q.when('I Love you!');
var promiseB = $q.when('Love story!');
var promiseC = $q.when("Let't get wet!");
$q.all([promiseA,promiseB,promiseC]).then(function(value){
value[0].then(function(value){$log.info(value);})
value[1].then(function(value){$log.info(value);})
value[2].then(function(value){$log.info(value);})
})
$q服务的具体使用例子
...
.factory('userService', ['$http', '$q', function ($http, $q) { var userService = {}; // 返回的服务 this.urlForRandomUser = "https://randomuser.me/api/"; var that = this; // 获取当前作用域,下面要用到
userService.getRandomUser = function () { var defered = $q.defer(); $http.get(that.urlForRandomUser)
.success(function (data) {
defered.resolve(data.results[0]);
})
.error(function (err) {
defered.reject(err);
});
return defered.promise; // 把defered对象中的promise对象返回出来
};
...
.controller('firstController', ['$scope', 'userService', function ($scope, user) { $scope.getUser = function () { function success(data) {
var str = angular.toJson(data, true); // 用angular的格式化json的方法,更为清晰
$scope.result = str;
} function error(err) {
$scope.result = err;
alert('error occured!\n' + err);
} // 注意这里不能用success或error函数,用then就好
user.getRandomUser().then(success, error);
} }])
Angular通信$q服务和promise对象的更多相关文章
- angular的$q服务和promise模式
此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- angular $q服务的用法
Promise是一种和callback有类似功能却更强大的异步处理模式,有多种实现模式方式,比如著名的Q还有JQuery的Deffered. 什么是Promise 以前了解过Ajax的都能体会到回调的 ...
- angular的异步处理$q的使用(promise)
Angular中的promise: Promise是一种异步方式处理值的方法.代表了一个函数最 终可能的返回值或者抛出的异常 在之前,通常都是使用闭包或者回调来响应非同步的有意义数据 使用promis ...
- angular中的$q服务实例
用于理解$q服务 参考:http://www.zouyesheng.com/angular.html#toc39 广义回调管理 和其它框架一样, ng 提供了广义的异步回调管理的机制. $http 服 ...
- angular的$q,defer,promise
$q是Angular的一种内置服务,它可以使你异步地执行函数,并且当函数执行完成时它允许你使用函数的返回值(或异常). 官网:http://docs.angularjs.cn/api/ng/servi ...
- $q服务——angular
$q是做为angular的一个服务而存在的,只是对promise异步编程模式的一个简化实现版,源码中剔除注释实现代码也就二百多行,下面开始介绍$q的API. 一.defer对象(延迟对象)可以通$q. ...
随机推荐
- .net异步性能测试(包括ASP.NET MVC WebAPI异步方法)
很久没有写博客了,今年做的产品公司这两天刚刚开了发布会,稍微清闲下来,想想我们做的产品还有没有性能优化空间,于是想到了.Net的异步可以优化性能,但到底能够提升多大的比例呢?恰好有一个朋友正在做各种语 ...
- python 作用域(LEGB)
def fa(a): b = 200 c = 888 def fb(b): print(b) print(a) print(c) print(sum) return fb c = 2 sum = 10 ...
- mybatis入门篇基——基本配置与参数说明
Mybatis 好吧这是我第一次写这种文章~如果有不足和错误之处欢迎评论,指点.今天想谈谈关于mybatis的一些基础入门知识. 进入正题~~: a.关于mybatis: 我个人觉得mybatis深得 ...
- StringBuffer和String的相互转换
1:用法: * A:String -- >StringBuffer * a:通过构造方法 * b:通过append()方法 * B:StringBuffer --> String * a: ...
- JAVA设计模式总结之六大设计原则
从今年的七月份开始学习设计模式到9月底,设计模式全部学完了,在学习期间,总共过了两篇:第一篇看完设计模式后,感觉只是脑子里面有印象但无法言语.于是决定在看一篇,到9月份第二篇设计模式总于看完了,这一篇 ...
- java数据库编程之嵌套子查询及exists的使用
第四章:高级查询(二) 4.1:exists和not exists子查询 4.1.1:exists子查询 用exists作为子查询的where条件 语法:select,,,,,,from 表名 w ...
- java基础(Fundamental)
第一节 java开发环境 1.Linux操作系统 1)开源的操作系统.免费,主要作为服务器操作系统, 而Java主要是服务器端开发,所以部署环境都是Linux 2)Linux与Windows目录结构的 ...
- Go语言备忘录:反射的原理与使用详解
目录: 预备知识 reflect.Typeof.reflect.ValueOf Value.Type 动态调用 通过反射可以修改原对象 实现类似“泛型”的功能 1.预备知识: Go的变量都是静态类 ...
- JavaScript实现常见算法面试题
算法题目部分参照了<进军硅谷>这本书. github:https://github.com/qcer/Algo-Practice (如果你觉得有帮助,记得给个star,THS) 一.排序 ...
- 第六章 JDBC
第一章 JDBC 一.JDBC的简介 1.什么是JDBC JDBC是java数据库连接(java database connectivity)技术的简称,它充当了java应用程序与各个不同数据库之间进 ...