用于理解$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;
}) }])

demo

angular中的$q服务实例的更多相关文章

  1. angular中的$q服务

    $q的一共有四个api: 1.$q.when(value, successFn, errorFn, progressFn),返回值为一个promise对象 --value可以是一个任意数据,也可以是一 ...

  2. 形象的讲解angular中的$q与promise(转)

    以下内容摘自http://www.ngnice.com/posts/126ee9cf6ddb68 promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多. ...

  3. 原创:形象的讲解angular中的$q与promise

    promise不是angular首创的,作为一种编程模式,它出现在……1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en ...

  4. Docker & k8s 系列三:在k8s中部署单个服务实例

    本章将会讲解: pod的概念,以及如何向k8s中部署一个单体应用实例. 在上面的篇幅中,我们了解了docker,并制作.运行了docker镜像,然后将镜像发布至中央仓库了.然后又搭建了本机的k8s环境 ...

  5. angular中的$q.defer()服务异步处理

    jquery和angular都有defer服务,我暂以angular为例谈谈我的理解,最后并附上jquery的阮一峰总结的defer. 以我目前项目的部分代码为例说明为什么要用deferred. fu ...

  6. promise和Angular中的 $q, defer

    在ES6语法中,新出了promise构造函数, 可用来生成promise实例. Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作).有了promise对象, 可以将异步操作以同步 ...

  7. Angular中的$q的形象解释及深入用法

    作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...

  8. angular中的$http服务

    $http是ng内置的一个服务.是简单的封装了浏览器原生的XMLHttpRequest对象. 写法1 $http({ method: "GET", url: 'data.json' ...

  9. angular的$q服务和promise模式

    此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal's Q CommonJS Promise建议文档 将承诺(promise) 作为和 异步执行操作(action) ...

随机推荐

  1. 【redis运维】redis自己主动安装脚本(仅仅安装redis)

    Redis自己主动安装部署 本文总共分为4个部分:         redis自己主动安装脚本文件夹结构说明:         redis自己主动安装脚本内容:         redis的操作系统服 ...

  2. 【react】慕课网视频学习笔记

    1.JSX:语法糖,对语言的功能并没有影响,但更方便程序员使用,增强可读性. 2.jsFiddle:前端在线调试工具 3.为什么要把this额外声明成_self变量,因为window.setTimeo ...

  3. 3、Android-全局大喇叭-广播机制

    所谓的官博机制可以理解成为1对多的概念 即一个喇叭所有的人都能听到(统一范围内) 为了便于及逆行系统级别的消息通知 Android引入了一套广播机制 而且更容易进行实现. 3.1.广播机制的简介 再A ...

  4. 3、Dubbo-环境搭建

    官方推荐使用 Zookeeper 注册中心 3.1).[windows]-安装zookeeper 开发中均在Linux中安装!!! 1.下载zookeeper 网址 https://archive.a ...

  5. 学习T-io框架,从写一个Redis客户端开始

    前言   了解T-io框架有些日子了,并且还将它应用于实战,例如 tio-websocket-server,tio-http-server等.但是由于上述两个server已经封装好,直接应用就可以.所 ...

  6. EasyConnect 使用方法

    一.此处以安卓系统为例进行介绍. 1.通过谷歌市场下载 EasyConnect,安装完成后,打开EasyConnect,界面如下图 1 所示 <ignore_js_op> 2.输入 SSL ...

  7. SpringBoot+MyBatis中自动根据@Table注解和@Column注解生成ResultMap

    其实我一点都不想用mybatis,好多地方得自己写,比如这里. 使用mybatis要写大量的xml,烦的一批.最烦人的莫过于写各种resultmap,就是数据库字段和实体属性做映射.我认为这里应该是m ...

  8. PAT——1058. 选择题

    批改多选题是比较麻烦的事情,本题就请你写个程序帮助老师批改多选题,并且指出哪道题错的人最多. 输入格式: 输入在第一行给出两个正整数N(<=1000)和M(<=100),分别是学生人数和多 ...

  9. PAT——1022. D进制的A+B

    输入两个非负10进制整数A和B(<=230-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 输出格式: 输出A+B的D ...

  10. Maven创建Web项目、、、整合SSM框架

    自己接触ssm框架有一段时间了,从最早的接触新版ITOO项目的(SSM/H+Dobbu zk),再到自己近期来学习到的<淘淘商城>一个ssm框架的电商项目.用过,但是还真的没有自己搭建过, ...