amgular $q用法 amgular $q用法

amgular $q用法

 

在用JQuery的時候就知道 promise 是 Js異步編程模式的一種模式,可是不是很明白他跟JQuery的deferred對象有什麼區別。隨着公司項目的進行,要跟後臺接數據了,因此決定搞定它。javascript

Promise

Promise是一種模式,以同步操做的流程形式來操做異步事件,避免了層層嵌套,能夠鏈式操做異步事件。css

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

ES6中Promise、angularJS內置的AngularJS內置Q,以及when採用的都是Promises/A規範,以下:html5

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

  • pending狀態:能夠過渡到履行或拒絕狀態。
  • fulfilled狀態:不能變爲其餘任何狀態,並且狀態不能改變,必須有value值。
  • rejected狀態:不能變爲其餘任何狀態,並且狀態不能改變,必須有reason。

狀態的轉移是一次性的,狀態一旦變成fulfilled(已完成)或者failed(失敗/拒絕),就不能再變了。git

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的基本用法github

上面代碼表示, $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關聯。promise

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

轉貼:http://www.html5jscss.com/angular-promise.html

相關文章
相關標籤/搜索