理解 $q 和 promise基本用法-1 4.18

$q 和 promise

须要在 angular 中掌握异步的知识，咱们须要掌握这几个重要的知识点，http, promise

广义回调管理

首先来看看 $q 的基本含义：

• 根据官网描述：基本的使用方法
  • 经过 $q 服务的到一个 deferred
  • 经过 deferred 实例的 promise 属性获得一个 promise 对象
  • promise 对象负责定义回调函数
  • deferred 实例负责触发回调
• 下面👇一个 demo 理解一下

angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  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 这三个东西。

$q 的基本 api 使用

• $q 有四种方法
  • $q.all() 合并多个 promise ，获得一个新的 promise
  • $q.defer() 返回一个 deferred 对象
  • $q.reject() 包装一个错误，以使回调链能正确处理下去
  • $q.when() 返回一个 promise 对象

$q.all 适用于并发的场景

angular.module('app', [], angular.noop)
.controller('TestCtrl', function($scope){
  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 的功能和它的 api 的使用。

$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)
  }
);
复制代码

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');
复制代码

promise

• promise 对象只有 then() 一个方法，注册成功回调函数和失败回调函数，再返回一个 promise 对象，以用于链式调用。

看完了个人第一篇文章，能够看看第二篇的一个🌰栗子

$q 和 promise 的形象理解