用于理解$q服务
参考:http://www.zouyesheng.com/angular.html#toc39
广义回调管理
和其它框架一样, ng 提供了广义的异步回调管理的机制。$http服务是在其之上封装出来的。这个机制就是 ng 的$q服务。
不过 ng 的这套机制总的来说实现得比较简单,按官方的说法,够用了。
使用的方法,基本上是:
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)} ) 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)} );
11.2.2. deferred
- promise属性就是返回一个promise对象的。
- resolve()成功回调
- reject()失败回调
var defer = $q.defer(); var promise = defer.promise; promise.then(function(data){console.log('ok,' + 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; }) }])