Javacript和AngularJS中的Promises

 

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

deferred表示异步操作的结果，提供了一个显示操作结果和状态的接口，并提供了一个可以获取该操作结果相关的promise实例。deferred是可以改变操作状态的。promise提供了一个用来和相关deferred交互的接口。当创建一个deferred,相当于一个pending状态；我们可以在创建deferred之后，定义回调函数，而回调函数在得到resolved和rejected的状态提示后开始执行。异步方法不需要知道回调函数如何操作，只需要在得到resolved或rejected状态后通知回调函数开始执行。■ 基本用法→ 创建deferredvar 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);})

async(myFirstDeferred.resolve, myFirstDeferred.reject);→ 使用deferred中的promise

var myFirstPromise = myFirstDeferred.promise;myFirstPromise  .then(function(data){    }, function(error){    })

→ 通常把异步方法包裹到一个函数中

 

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

假设有一个异步方法，使用deferred.resolve返回一个值。

function async(value){  var deferred = $q.defer();  var result = value / 2;  deferred.resolve(result);  return deferred.promise;}

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

如果从捕获异常的角度，还可以这样写：

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

使用该方法能够让deferred呈现error状态，并给出一个出现error的理由。

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

返回一个promise并带上值。

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

等待所有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');})

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Javacript和AngularJS中的Promises

关键词：JS