這篇文章主要介紹了Angular中的Promise對(duì)象($q介紹),本文講解了Promise模式、Q Promise的基本用法、AngularJs中的$q.defferd等內(nèi)容,需要的朋友可以參考下

在用JQuery的時(shí)候就知道 promise 是 Js異步編程模式的一種模式，但是不是很明白他跟JQuery的deferred對(duì)象有什么區(qū)別。隨著公司項(xiàng)目的進(jìn)行，要跟后臺(tái)接數(shù)據(jù)了，所以決定搞定它。

Promise

Promise是一種模式，以同步操作的流程形式來(lái)操作異步事件，避免了層層嵌套，可以鏈?zhǔn)讲僮鳟惒绞录?/P>

我們知道，在編寫javascript異步代碼時(shí)，callback是最最簡(jiǎn)單的機(jī)制，可是用這種機(jī)制的話必須犧牲控制流、異常處理和函數(shù)語(yǔ)義化為代價(jià)，甚至?xí)屛覀兊暨M(jìn)出現(xiàn)callback大坑，而promise解決了這個(gè)問(wèn)題。

ES6中Promise、angularJS內(nèi)置的AngularJS內(nèi)置Q，以及when采用的都是Promises/A規(guī)范，如下：

每個(gè)任務(wù)都有三種狀態(tài)：未完成(pending)、完成(fulfilled)、失敗(rejected)。

1.pending狀態(tài)：可以過(guò)渡到履行或拒絕狀態(tài)。

2.fulfilled狀態(tài)：不能變?yōu)槠渌魏螤顟B(tài)，而且狀態(tài)不能改變，必須有value值。

3.rejected狀態(tài)：不能變?yōu)槠渌魏螤顟B(tài)，而且狀態(tài)不能改變，必須有reason。

狀態(tài)的轉(zhuǎn)移是一次性的，狀態(tài)一旦變成fulfilled（已完成）或者failed（失敗/拒絕），就不能再變了。

代碼如下:

function okToGreet(name){

return name === 'Robin Hood';

}

function asyncGreet(name) {

var deferred = $q.defer();

setTimeout(function() {

// 因?yàn)檫@個(gè)異步函數(shù)fn在未來(lái)的異步執(zhí)行，我們把代碼包裝到 $apply 調(diào)用中，一邊正確的觀察到 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() 構(gòu)建的 deffered 實(shí)例的幾個(gè)方法的作用。如果異步操作成功，則用resolve方法將Promise對(duì)象的狀態(tài)變?yōu)椤俺晒Α保磸膒ending變?yōu)閞esolved）；如果異步操作失敗，則用reject方法將狀態(tài)變?yōu)椤笆　保磸膒ending變?yōu)閞ejected）。最后返回 deferred.promise ，我們就可以鏈?zhǔn)秸{(diào)用then方法。

JS將要有原生Promise，ES6中已經(jīng)有Promise對(duì)象，firefox和Chrome 32 beta版本已經(jīng)實(shí)現(xiàn)了基本的Promise API

AngularJs中的$q.defferd

通過(guò) 調(diào)用 $q.defferd 返回deffered對(duì)象以鏈?zhǔn)秸{(diào)用。該對(duì)象將Promises/A規(guī)范中的三個(gè)任務(wù)狀態(tài)通過(guò)API關(guān)聯(lián)。

deffered API

deffered 對(duì)象的方法

1.resolve(value)：在聲明resolve()處，表明promise對(duì)象由pending狀態(tài)轉(zhuǎn)變?yōu)閞esolve。

2.reject(reason)：在聲明resolve()處，表明promise對(duì)象由pending狀態(tài)轉(zhuǎn)變?yōu)閞ejected。

3.notify(value) ：在聲明notify()處，表明promise對(duì)象unfulfilled狀態(tài)，在resolve或reject之前可以被多次調(diào)用。

deffered 對(duì)象屬性

promise ：最后返回的是一個(gè)新的deferred對(duì)象 promise 屬性，而不是原來(lái)的deferred對(duì)象。這個(gè)新的Promise對(duì)象只能觀察原來(lái)Promise對(duì)象的狀態(tài)，而無(wú)法修改deferred對(duì)象的內(nèi)在狀態(tài)可以防止任務(wù)狀態(tài)被外部修改。

Promise API

當(dāng)創(chuàng)建 deferred 實(shí)例時(shí)會(huì)創(chuàng)建一個(gè)新的 promise 對(duì)象,并可以通過(guò) deferred.promise 得到該引用。

promise 對(duì)象的目的是在 deferred 任務(wù)完成時(shí),允許感興趣的部分取得其執(zhí)行結(jié)果。

promise 對(duì)象的方法

1.then(errorHandler, fulfilledHandler, progressHandler)：then方法用來(lái)監(jiān)聽一個(gè)Promise的不同狀態(tài)。errorHandler監(jiān)聽failed狀態(tài)，fulfilledHandler監(jiān)聽fulfilled狀態(tài)，progressHandler監(jiān)聽unfulfilled（未完成）狀態(tài)。此外,notify 回調(diào)可能被調(diào)用 0到多次，提供一個(gè)進(jìn)度指示在解決或拒絕（resolve和rejected）之前。

2.catch(errorCallback) —— promise.then(null, errorCallback) 的快捷方式

3.finally(callback) ——讓你可以觀察到一個(gè) promise 是被執(zhí)行還是被拒絕, 但這樣做不用修改最后的 value值。 這可以用來(lái)做一些釋放資源或者清理無(wú)用對(duì)象的工作,不管promise 被拒絕還是解決。 更多的信息請(qǐng)參閱 完整文檔規(guī)范.

通過(guò)then()方法可以實(shí)現(xiàn)promise鏈?zhǔn)秸{(diào)用。

代碼如下:

promiseB = promiseA.then(function(result) {

return result + 1;

});

// promiseB 將會(huì)在處理完 promiseA 之后立刻被處理,

// 并且其 value值是promiseA的結(jié)果增加1

$q的其他方法

$q.when(value)：傳遞變量值，promise.then()執(zhí)行成功回調(diào)

$q.all(promises)：多個(gè)promise必須執(zhí)行成功，才能執(zhí)行成功回調(diào)，傳遞值為數(shù)組或哈希值，數(shù)組中每個(gè)值為與Index對(duì)應(yīng)的promise對(duì)象

更多信息請(qǐng)查看IT技術(shù)專欄