比如頁面調用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');
})
以上就是本文的詳細內容，希望對大家學習有所幫助，新年快樂！