詳解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');
})

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