快捷導(dǎo)航

詳解Javacript和AngularJS中的Promises

更新時(shí)間：2016年02月09日 10:13:28 作者：Darren Ji

這篇文章主要介紹了詳解Javacript和AngularJS中的Promises的相關(guān)資料,promise是Javascript異步編程很好的解決方案。，需要的朋友可以參考下

比如頁(yè)面調(diào)用google地圖的api時(shí)就使用到了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);

■ 如何處理多個(gè)異步方法

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

最簡(jiǎn)單的，可能會(huì)這樣寫(xiě)：

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

以上的代碼是比較難維護(hù)的。

我們可以讓所有的異步方法執(zhí)行完畢后出來(lái)一個(gè)通知。

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

async1(success);
async2(success);
...
asyncN(success);

■ 什么是Promise和Deferred

deferred表示異步操作的結(jié)果，提供了一個(gè)顯示操作結(jié)果和狀態(tài)的接口，并提供了一個(gè)可以獲取該操作結(jié)果相關(guān)的promise實(shí)例。deferred是可以改變操作狀態(tài)的。

promise提供了一個(gè)用來(lái)和相關(guān)deferred交互的接口。

當(dāng)創(chuàng)建一個(gè)deferred,相當(dāng)于一個(gè)pending狀態(tài)；
當(dāng)執(zhí)行resolve方法，相當(dāng)于一個(gè)resolved狀態(tài)。
當(dāng)執(zhí)行reject方法，相當(dāng)于一個(gè)rejected狀態(tài)。

我們可以在創(chuàng)建deferred之后，定義回調(diào)函數(shù)，而回調(diào)函數(shù)在得到resolved和rejected的狀態(tài)提示后開(kāi)始執(zhí)行。異步方法不需要知道回調(diào)函數(shù)如何操作，只需要在得到resolved或rejected狀態(tài)后通知回調(diào)函數(shù)開(kāi)始執(zhí)行。

■ 基本用法

→ 創(chuàng)建deferred

var myFirstDeferred = $q.defer();

這里，對(duì)于myFirstDeferred這個(gè)deferred，狀態(tài)是pending,接下來(lái)，當(dāng)異步方法執(zhí)行成功，狀態(tài)變成resolved，當(dāng)異步方法執(zhí)行失敗，狀態(tài)變成rejected。

→ Resolve或Reject這個(gè)dererred

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

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

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

async(myFirstDeferred.resolve, myFirstDeferred.reject);

→ 使用deferred中的promise

var myFirstPromise = myFirstDeferred.promise;

myFirstPromise
  .then(function(data){
  
  }, function(error){
  
  })

deferred可以有多個(gè)promise.

var anotherDeferred = $q.defer();

anotherDeferred.promise
  .then(function(data){
  
  },function(error){
  
  })
  
//調(diào)用異步方法
async(anotherDeferred.resolve, anotherDeferred.reject);

anotherDeferred.promise
  .then(function(data){
  
  }, function(error){
  
  })

以上，如果異步方法async成功執(zhí)行，兩個(gè)success方法都會(huì)被調(diào)用。

→ 通常把異步方法包裹到一個(gè)函數(shù)中

function getData(){
  var deferred = $q.defer();
  async(deferred.resolve,deferred.reject);
  return deferred.promise;
}

//deferred的promise屬性記錄了達(dá)到resolved, reject狀態(tài)所需要執(zhí)行的success和error方法
var dataPromise = getData();
dataPromise
  .then(function(data){
    console.log('success');
  }, function(error){
    console.log('error');
  })

如果只關(guān)注success回調(diào)函數(shù)該如何寫(xiě)呢？

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

如果只關(guān)注error回調(diào)函數(shù)該如何寫(xiě)呢？

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

dataPromise.catch(function(error){
  console.log('error');
})

如果不管回調(diào)成功或失敗都返回相同的結(jié)果呢？

var finalCallback = function(){
  console.log('不管回調(diào)成功或失敗都返回這個(gè)結(jié)果');
}

dataPromise.then(finalCallback, finalCallback);

或

dataPromise.finally(finalCallback);
■ 值鏈?zhǔn)?/p>

假設(shè)有一個(gè)異步方法，使用deferred.resolve返回一個(gè)值。

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出的值成為每一個(gè)鏈?zhǔn)降膶?shí)參。

■ Promise鏈?zhǔn)?br />

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);
})

當(dāng)然一種更易讀的寫(xiě)法是：

function logValue(value){
  console.log(value);
}

async1(10)
  .then(async2)
  .then(logValue);

async1方法的返回值成為then方法中的success方法中的實(shí)參。

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

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

■ $q.reject(reason)

使用該方法能夠讓deferred呈現(xiàn)error狀態(tài)，并給出一個(gè)出現(xiàn)error的理由。

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

■ $q.when(value)

返回一個(gè)promise并帶上值。

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

■ $q.all(promisesArr)

等待所有promise執(zhí)行完成。

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

以上就是本文的詳細(xì)內(nèi)容，希望對(duì)大家學(xué)習(xí)有所幫助，新年快樂(lè)！

您可能感興趣的文章: