AngularJS中的Promise詳細介紹及執行個體代碼_AngularJS

Angular中的Promise

在用jQuery的時候就知道 promise 是 Js非同步編程模式的一種模式，但是不是很明白他跟JQuery的deferred對象有什麼區別。隨著公司項目的進行，要跟後台接資料了，所以決定搞定它。

Promise

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

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

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

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

• pending狀態：可以過渡到履行或拒絕狀態。
• fulfilled狀態：不能變為其他任何狀態，而且狀態不能改變，必須有value值。
• 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 對象的方法

• resolve(value)：在聲明resolve()處，表明promise對象由pending狀態轉變為resolve。
• reject(reason)：在聲明resolve()處，表明promise對象由pending狀態轉變為rejected。
• notify(value) ：在聲明notify()處，表明promise對象unfulfilled狀態，在resolve或reject之前可以被多次調用。

deffered 對象屬性

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

Promise API

當建立 deferred 執行個體時會建立一個新的 promise 對象,並可以通過 deferred.promise 得到該引用。

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

promise 對象的方法

then(errorHandler, fulfilledHandler, progressHandler)：then方法用來監聽一個Promise的不同狀態。errorHandler監聽failed狀態，fulfilledHandler監聽fulfilled狀態，progressHandler監聽unfulfilled（未完成）狀態。此外,notify 回調可能被調用 0到多次，提供一個進度指示在解決或拒絕（resolve和rejected）之前。

catch(errorCallback) —— promise.then(null, errorCallback) 的捷徑

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對象。

angular $apply ->成功響應
angular http 請求攔截

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！