promise是Javascript非同步編程很好的解決方案。對於一個非同步方法,執行一個回調函數。比如頁面調用google地圖的api時就使用到了promise。 function success(position){ var cords = position.coords; console.log(
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'); })