angular中的$q服务实例

发布时间：2020-12-17 10:06:29 所属栏目：安全来源：网络整理

导读：用于理解$q服务参考：http://www.zouyesheng.com/angular.html#toc39 广义回调管理和其它框架一样， ng 提供了广义的异步回调管理的机制。$http服务是在其之上封装出来的。这个机制就是 ng 的$q服务。不过 ng 的这套机制总的来说实现得比较简单，按官方的

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

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; }) }])

demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!