Angular中的Promise物件($q介紹)_AngularJS

用JQuery的時候就知道 promise 是 Js非同步程式設計模式的模式，但是不是很明白他跟JQuery的deferred物件有什麼差別。隨著公司專案的進行，要跟後台接數據了，所以決定搞定它。

Promise

Promise是一種模式，以同步操作的流程形式來操作非同步事件，避免了層層嵌套，可以鍊式操作非同步事件。

我們知道，在寫javascript非同步程式碼時，callback是最簡單的機制，可是用這種機制的話必須犧牲控制流、異常處理和函數語意化為代價，甚至會讓我們掉進出現callback大坑，而promise解決了這個問題。

ES6中Promise、angularJS內建的AngularJS內建Q，以及when採用的都是Promises/A規範，如下：

每個任務都有三種狀態：未完成(pending)、完成(fulfilled)、失敗(rejected)。

1.pending狀態：可以過渡到履行或拒絕狀態。
2.fulfilled狀態：不能變成其他任何狀態，且狀態不能改變，必須有value值。
3.rejected狀態：不能變成其他任何狀態，而且狀態不能改變，必須有reason。

狀態的轉移是一次性的，狀態一旦變成fulfilled（已完成）或failed（失敗/拒絕），就不能再變了。

複製程式碼 程式碼如下:

function okToGreet(name){
    return name === 'Robin Hood';
}
 
function asyncGreet(name) {
    var deferred = $q.defer();
 
    setTimeout(function() {
     // 因為這個非同步函數fn在未來的非同步執行，我們把程式碼包裝到 $apply 呼叫中，一邊正確的觀察到 model 的改變
        $scope.$apply(function() {
            deferred.notify('About to greet ' name '.');
 
            if (okToGreet(name)) {
                deferred.resolve('Hello, ' name '!');
            } else {
                deferred.reject('Greeting ' name ' is not allowed.');
            }
        });
    }, 1000);
 
    return deferred.promise;
}
 
var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
    alert('Success: ' greeting);
}, function(reason) {
    alert('Failed: ' reason);
}, function(update) {
    alert('Got notification: ' update);
});

Q Promise的基本用法

上面程式碼表示， $q.defer() 建構的 deffered 實例的幾個方法的作用。如果非同步操作成功，則用resolve方法將Promise物件的狀態變為「成功」（即從pending變為resolved）；如果非同步操作失敗，則用reject方法將狀態變為「失敗」（即從pending變為rejected）。最後返回 deferred.promise ，我們就可以鍊式呼叫then方法。

JS將要有原生Promise，ES6中已經有Promise對象，firefox和Chrome 32 beta版本已經實現了基本的Promise API

AngularJs中的$q.defferd

透過 呼叫 $q.defferd 傳回deffered物件以鍊式呼叫。該物件將Promises/A規範中的三個任務狀態透過API關聯。

deffered API

deffered 物件的方法

1.resolve(value)：在聲明resolve()處，表示promise物件由pending狀態轉換為resolve。
2.reject(reason)：在宣告resolve()處，表示promise物件由pending狀態轉換為rejected。
3.notify(value) ：在宣告notify()處，表示promise物件unfulfilled狀態，在resolve或reject之前可以被多次呼叫。

deffered 物件屬性

promise ：最後回傳的是一個新的deferred物件 promise 屬性，而不是原來的deferred物件。這個新的Promise物件只能觀察原來Promise物件的狀態，而無法修改deferred物件的內在狀態可以防止任務狀態被外部修改。

Promise API

當建立 deferred 實例時會建立一個新的 promise 物件,並且可以透過 deferred.promise 得到該參考。

promise 物件的目的是在 deferred 任務完成時,允許感興趣的部分取得其執行結果。

promise 物件的方法

1.then(errorHandler, fulfilledHandler, progressHandler)：then方法用來監聽一個Promise的不同狀態。 errorHandler監聽failed狀態，fulfilledHandler監聽fulfilled狀態，progressHandler監聽unfulfilled（未完成）狀態。此外,notify 回呼可能被呼叫 0到多次，提供一個進度指示在解決或拒絕（resolve和rejected）之前。
2.catch(errorCallback) —— promise.then(null, errorCallback) 的捷徑
3.finally(callback) ——讓你可以觀察到一個 promise 是被執行還是被拒絕, 但這樣做不用修改最後的 value值。 這可以用來做一些釋放資源或清理無用物件的工作,不管promise 被拒絕還是解決。 更多的資訊請參閱 完整文件規格.

透過then()方法可以實作promise鍊式呼叫。

複製程式碼 程式碼如下:

promiseB = promiseA.then(function(result) { 
  return result 1; 
}); 
 
// promiseB 將會在處理完 promiseA 之後立刻被處理, 
// 且其  value值是promiseA的結果增加1

$q的其他方法

$q.when(value)：傳遞變數值，promise.then()執行成功回呼
$q.all(promises)：多個promise必須執行成功，才能執行成功回調，傳遞值為數組或雜湊值，數組中每個值為與Index對應的promise物件