AngularJS是什麼
AngularJS誕生於2009年,由Misko Hevery 等人建立,後為Google所收購。是一款優秀的前端JS架構,已經被用於Google的多款產品當中。AngularJS有著諸多特性,最為核心的是:MVVM、模組化、自動化雙向資料繫結、語義化標籤、依賴注入,等等
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對象。