Javacript和AngularJS中的Promises

?

promise是Javascript異步編程很好的解決方案。對于一個異步方法，執行一個回調函數。

比如頁面調用google地圖的api時就使用到了promise。

?

function success(position){var cords = position.coords;console.log(coords.latitude + coords.longitude);
}function error(err){console.warn(err.code+err.message)
}navigator.geolocation.getCurrentPosition(success, error);

?

■ 如何處理多個異步方法

如果有很多異步方法需要按序執行呢？async1(success, failure), async2(success, failure), ...asyncN(success, failure),該如何處理呢？

最簡單的，可能會這樣寫：

?

async1(function(){async2(function(){...asyncN(null, null);...}, null)
}, null)

?

以上的代碼是比較難維護的。

我們可以讓所有的異步方法執行完畢后出來一個通知。

?

var counter = N;
function success(){counter--;if(counter === 0){alert('done');}
}async1(success);
async2(success);
...
asyncN(success);

?

■ 什么是Promise和Deferred

deferred表示異步操作的結果，提供了一個顯示操作結果和狀態的接口，并提供了一個可以獲取該操作結果相關的promise實例。deferred是可以改變操作狀態的。

promise提供了一個用來和相關deferred交互的接口。

當創建一個deferred,相當于一個pending狀態；
當執行resolve方法，相當于一個resolved狀態。
當執行reject方法，相當于一個rejected狀態。

我們可以在創建deferred之后，定義回調函數，而回調函數在得到resolved和rejected的狀態提示后開始執行。異步方法不需要知道回調函數如何操作，只需要在得到resolved或rejected狀態后通知回調函數開始執行。

■ 基本用法

→ 創建deferred

var myFirstDeferred = $q.defer();

這里，對于myFirstDeferred這個deferred，狀態是pending,接下來，當異步方法執行成功，狀態變成resolved，當異步方法執行失敗，狀態變成rejected。

→ Resolve或Reject這個dererred

假設有這樣的一個異步方法：async(success, failure)

?

async(function(value){myFirstDeferred.resolve(value);
}, function(errorReason){myFirstDeferred.reject(errorReason);
})

?

在AngularJS中，$q的resolve和reject不依賴上下文，大致可以這樣寫：

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ 使用deferred中的promise

var myFirstPromise = myFirstDeferred.promise;myFirstPromise.then(function(data){}, function(error){})

?

deferred可以有多個promise.

?

var anotherDeferred = $q.defer();anotherDeferred.promise.then(function(data){},function(error){})//調用異步方法
async(anotherDeferred.resolve, anotherDeferred.reject);anotherDeferred.promise.then(function(data){}, function(error){})

?

以上，如果異步方法async成功執行，兩個success方法都會被調用。

→ 通常把異步方法包裹到一個函數中

?

function getData(){var deferred = $q.defer();async(deferred.resolve,deferred.reject);return deferred.promise;
}//deferred的promise屬性記錄了達到resolved, reject狀態所需要執行的success和error方法
var dataPromise = getData();
dataPromise.then(function(data){console.log('success');}, function(error){console.log('error');})

?

如果只關注success回調函數該如何寫呢？

dataPromise.then(function(data){console.log('success');})

?

如果只關注error回調函數該如何寫呢？

dataPromise.then(null, function(error){console.log('error');})或dataPromise.catch(function(error){console.log('error');
})

?

如果不管回調成功或失敗都返回相同的結果呢？

var finalCallback = function(){console.log('不管回調成功或失敗都返回這個結果');
}dataPromise.then(finalCallback, finalCallback);或dataPromise.finally(finalCallback);

■ 值鏈式

假設有一個異步方法，使用deferred.resolve返回一個值。

function async(value){var deferred = $q.defer();var result = value / 2;deferred.resolve(result);return deferred.promise;
}

?

既然返回的是promise,我們就可以不斷then, then下去的。

var promise = async(8).then(function(x){return x+1;}).then(function(x){return x*2;})promise.then(function(x){console.log(x);
})  

以上，resolve出的值成為每一個鏈式的實參。

■ Promise鏈式

?

function async1(value){var deferred = $q.defer();var result = value * 2;deferred.resolve(result);return deferred.promise;
}function async2(value){var deferred = $q.defer();var result = value + 1;deferred.resolve(result);return deferred.promise;
}var promise = async1(10).then(function(x){return async2(x);})promise.then(function(x){console.log(x);
}) 

?

當然一種更易讀的寫法是：

function logValue(value){console.log(value);
}async1(10).then(async2).then(logValue);

?

async1方法的返回值成為then方法中的success方法中的實參。

如果從捕獲異常的角度，還可以這樣寫：

async1().then(async2).then(async3).catch(handleReject).finally(freeResources);

?

■ $q.reject(reason)?? ?

使用該方法能夠讓deferred呈現error狀態，并給出一個出現error的理由。

var promise = async().then(function(value){if(true){return value;} else {return $q.reject('value is not satisfied');}
})

?

■ $q.when(value)

返回一個promise并帶上值。

function getDataFromBackend(query){var data = searchInCache(query);if(data){return $q.when(data);} else {reutrn makeAasyncBackendCall(query);}
}

?

■ $q.all(promisesArr)

等待所有promise執行完成。

var allPromise = $q.all([async1(),async2(),...asyncN();
])allProise.then(function(values){var value1 = values[0],value2 = values[1],...valueN = values[N];console.log('all done');
})

?