Angular通訊 q服務和promise物件

promise

約定（promise）是乙個物件，表示在未來時間點會發生的某件事情，約定可以是三種狀態之一：等待、完成或拒絕。約定將從等待狀態開始，然後可以轉換為完成或者拒絕狀態，一旦約定完成或者被拒絕，它就無法再改變狀態。例如我們的$http服務返回的就是乙個經過包裝的promise物件。

可以看到，黑色部分圈起來的是基本的promise部分，此外$http還提供了success和error的語法糖，我們完全也可以直接使用then方法。

var promise = ...;  // 省略$http過程
promise.then(function (data) , function (err) );

這裡的then方法定義了未來的某個要執行的**函式，當promis通過某個方法轉換到完成或者拒絕狀態時，**函式就會被呼叫，在下面說$q服務的時候會詳細介紹。

then方法會返回乙個promise物件，所以可以鏈式呼叫，另外它返回的值會傳遞給下乙個then函式。

promisea
.then(function(val))
.then(function(val))
.then(
function(val),
function(val)
);

如果第乙個then傳入的val = 1，那麼最終輸入：1,2,3。

$q服務

$q服務有4個方法函式

$q.defer()，返回乙個deferred物件。

$q.reject()，返回乙個失敗原因，promise.then()執行失敗**。

$q.all(promises)，多個promise必須執行成功，才能執行成功**，傳遞值為陣列或雜湊值，陣列中每個值為與index對應的promise物件。

$q.when(value)，傳遞變數值，promise.then()執行成功**。

呼叫$q.defer()物件返回乙個deferred物件，這個物件是我們最常用的，列印出來看一下是什麼東西。

可以看到它有3個方法：resolve，reject，notify，分別對應於接受、拒絕、通知。還有乙個promise屬性，它的值就是乙個基本的promise物件。

/ 為了演示的目的,此處我們假設 `$q`, `scope` 以及 `oktogreet` 引用 在當前執行環境中可用  
// (比如他們已經被注入,或者被當做引數傳進來了). 
function asyncgreet(name) else 
}); 
}, 1000); 
return deferred.promise; 
} 
var promise = asyncgreet('小漠漠'); 
promise.then(function(greeting) , function(reason) , function(update) );

鏈式呼叫內部的預設失敗**會向後傳遞異常，所以為避免麻煩，且不在意每一處的業務邏輯錯誤，不要在每一處then()處宣告異常處理函式，在最後乙個then()中宣告即可。

var deferred = $q.defer();
deferred.resolve(1);
var promisea = deferred.promise;
promisea
.then(function(val))
.then(function(val))
.then(
function(val),
function(val)
);

鏈式呼叫完成後控制台列印出 1,2,3

var deferred = $q.defer();
deferred.resolve(1);
var promisea = deferred.promise;
promisea
.then(function(val))
.then(function(val))
.then(function(val))
.then(function(val))
.then(
function(val),
function(val)
);

鏈式呼叫完成後控制台列印出 1,15,可以看出，第乙個return $q.reject(15)之後，直到最後乙個then()才有錯誤**函式，所以異常一直傳遞到最後，中間的幾個then()沒有錯誤**函式。

下面演示乙個when和all的呼叫

var promisea = $q.when('i love you!');
var promiseb = $q.when('love story!');
var promisec = $q.when("let't get wet!");
$q.all([promisea,promiseb,promisec]).then(function(value))
value[1].then(function(value))
value[2].then(function(value))
})

$q服務的具體使用例子

我們知道，在angularjs的mvc框架之中，業務邏輯（包括網路請求）的部分應該盡可能寫到service層中，而讓controller的邏輯盡可能少。但是，怎麼把網路請求最終得到的有用的資料，返回給controller呢？

我們可以在service中返回乙個自定義的promise物件，用來**給controller。這裡的**者，由$q建立的「defered」物件來擔任。

service.js

...
.factory('userservice', ['$http', '$q', function ($http, $q) ; // 返回的服務
this.urlforrandomuser = "";
var that = this; // 獲取當前作用域，下面要用到
userservice.getrandomuser = function () )
.error(function (err) );
return defered.promise; // 把defered物件中的promise物件返回出來
};

controllers.js

...
.controller('firstcontroller', ['$scope', 'userservice', function ($scope, user) 
function error(err) 
// 注意這裡不能用success或error函式，用then就好
user.getrandomuser().then(success, error);
}}])

Angular通訊 q服務和promise物件

angular中的 q服務例項

Angular6的服務和依賴注入

Angular6 的服務和依賴注入

Angular通訊 q服務和promise物件

angular中的 q服務例項

Angular6的服務和依賴注入

Angular6 的服務和依賴注入

相關推薦