詳解Javacript和AngularJS中的Promises_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');})

以上就是本文的詳細內容，希望對大家學習有所協助，新年快樂！