理解 $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 的形象理解