angular中的$q服务实例
用于理解$q服务
参考:http://www.zouyesheng.com/angular.html#toc39
广义回调管理
和其它框架一样, ng 提供了广义的异步回调管理的机制。 $http 服务是在其之上封装出来的。这个机制就是 ng 的 $q 服务。
不过 ng 的这套机制总的来说实现得比较简单,按官方的说法,够用了。
使用的方法,基本上是:
- 通过 $q 服务得到一个 deferred 实例
- 通过 deferred 实例的 promise 属性得到一个 promise 对象
- promise 对象负责定义回调函数
- deferred 实例负责触发回调
var TestCtrl = function($q){
var defer = $q.defer();
var promise = defer.promise;
promise.then(function(data){console.log('ok, ' + data)},
function(data){console.log('error, ' + data)});
//defer.reject('xx');
defer.resolve('xx');
}
了解了上面的东西,再分别看 $q , deferred , promise 这三个东西。
11.2.1. $q
$q 有四个方法:
- $q.all() 合并多个 promise ,得到一个新的 promise
- $q.defer() 返回一个 deferred 对象
- $q.reject() 包装一个错误,以使回调链能正确处理下去
- $q.when() 返回一个 promise 对象
$q.all() 方法适用于并发场景很合适:
var TestCtrl = function($q, $http){
var p = $http.get('/json', {params: {a: 1}});
var p2 = $http.get('/json', {params: {a: 2}});
var all = $q.all([p, p2]);
p.success(function(res){console.log('here')});
all.then(function(res){console.log(res[0])});
}
$q.reject() 方法是在你捕捉异常之后,又要把这个异常在回调链中传下去时使用:
要理解这东西,先看看 promise 的链式回调是如何运作的,看下面两段代码的区别:
var defer = $q.defer();
var p = defer.promise;
p.then(
function(data){return 'xxx'}
);
p.then(
function(data){console.log(data)}
);
defer.resolve('123');
var defer = $q.defer();
var p = defer.promise;
var p2 = p.then(
function(data){return 'xxx'}
);
p2.then(
function(data){console.log(data)}
);
defer.resolve('123');
从模型上看,前者是“并发”,后者才是“链式”。
而 $q.reject() 的作用就是触发后链的 error 回调:
var defer = $q.defer();
var p = defer.promise;
p.then(
function(data){return data},
function(data){return $q.reject(data)}
).
then(
function(data){console.log('ok, ' + data)},
function(data){console.log('error, ' + data)}
)
defer.reject('123');
最后的 $q.when() 是把数据封装成 promise 对象:
var p = $q.when(0, function(data){return data},
function(data){return data});
p.then(
function(data){console.log('ok, ' + data)},
function(data){console.log('error, ' + data)}
);
11.2.2. deferred
deferred 对象有两个方法一个属性。
- promise 属性就是返回一个 promise 对象的。
- resolve() 成功回调
- reject() 失败回调
var defer = $q.defer();
var promise = defer.promise;
promise.then(function(data){console.log('ok, ' + data)},
function(data){console.log('error, ' + data)});
//defer.reject('xx');
defer.resolve('xx');
11.2.3. promise
promise 对象只有 then() 一个方法,注册成功回调函数和失败回调函数,再返回一个promise 对象,以用于链式调用。
下面是自己写的例子
var MyApp = angular.module('MyApp',[]); MyApp.controller('ListCtrl', ['$scope','$http', '$q', function($scope, $http ,$q){
$scope.name = 'hello'; function demo(){
var deferred = $q.defer();
// 简写版本
$http.get('data.json')
.success(function(data,status,headers){
deferred.resolve(data);
})
.error(function(data){
var reason = data;
deferred.reject(reason);
}) return deferred.promise;
} //触发premise的success
demo().then(function(data){
$scope.list = data;
}) }])
angular中的$q服务实例的更多相关文章
- angular中的$q服务
$q的一共有四个api: 1.$q.when(value, successFn, errorFn, progressFn),返回值为一个promise对象 --value可以是一个任意数据,也可以是一 ...
- 形象的讲解angular中的$q与promise(转)
以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...
- 原创:形象的讲解angular中的$q与promise
promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en ...
- Docker & k8s 系列三:在k8s中部署单个服务实例
本章将会讲解: pod的概念,以及如何向k8s中部署一个单体应用实例. 在上面的篇幅中,我们了解了docker,并制作.运行了docker镜像,然后将镜像发布至中央仓库了.然后又搭建了本机的k8s环境 ...
- angular中的$q.defer()服务异步处理
jquery和angular都有defer服务,我暂以angular为例谈谈我的理解,最后并附上jquery的阮一峰总结的defer. 以我目前项目的部分代码为例说明为什么要用deferred. fu ...
- promise和Angular中的 $q, defer
在ES6语法中,新出了promise构造函数, 可用来生成promise实例. Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作).有了promise对象, 可以将异步操作以同步 ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
- angular中的$http服务
$http是ng内置的一个服务.是简单的封装了浏览器原生的XMLHttpRequest对象. 写法1 $http({ method: "GET", url: 'data.json' ...
- angular的$q服务和promise模式
此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...
随机推荐
- 编程算法 - 数字在排序数组中出现的次数 代码(C)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/36869869 数字在排序数组中出现的次数 代 ...
- 2、Android-UI(布局待完成)
2.3.布局 实现界面的整齐摆放各种控件需要使用布局来完成 布局是一种可用于放置很多控件的容器 可以按照一定的规律调整内部的控件位置 布局的内部不仅可以放置控件还可以放置布局 1.线性布局 Linea ...
- CUDA 纹理的使用
纹理绑定有两种,一个是绑定到线性内存就是用cudaMalloc();cudaMemcpy();开辟的内存空间,另一种是绑定到cudaMallocArray, cudaMemcpyToArray开辟到的 ...
- ThinkPHP5入门(一)----框架篇
一.命名规范: 下划线法: 函数的命名 配置参数 常量(大写) 数据表和字段 驼峰法: 属性的命名 方法的命名 帕斯卡法: 类名 类文件名 类的命名
- CSS动画总结效果
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及a ...
- +QFTPOPEN: 603,0 怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那
+QFTPOPEN: 603,0 怎么把这样一个字符串中的 603 提取出来给一个 uint32_t 的变量那? 注意冒号后面有个空格!!! 答案:要使用 sscanf 标准库函数! char s ...
- oracle创建用户、表空间、临时表空间、分配权限步骤详解
首先登陆管理员账号,或者有DBA权限的用户,接下来依次: --查询所有用户select * from dba_users;--创建新用户create user gpmgt identified by ...
- win7在安装时跳过输入用户名界面,直接开启管理员用户
WIN7原版系统安装完后需要创建用户,为了追求纯净简化不必要的步骤,可以选择跳过创建用户直接启用内置管理员账户.首先,到了创建用户这一步先别急着往下点,此时按键盘的SHIFT + F10 组合键调出命 ...
- jquery中的 append , after , prepend , before 区别
jQuery append() 方法在被选元素的结尾插入内容. jQuery prepend() 方法在被选元素的开头插入内容. jQuery after() 方法在被选元素之后插入内容. jQuer ...
- 关于Spring配置文件提示的插件下载
1.springsource-tool-suite-update 最新各个版本下载地址 第一种方式: springsource-tool-suite-3.7.3.RELEASE-e4.5.2-upda ...