源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解Javacript和AngularJS中的Promises

  • 时间:2022-02-13 03:51 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解Javacript和AngularJS中的Promises
比如页面调用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);
 

[b]■ 如何处理多个异步方法[/b] 如果有很多异步方法需要按序执行呢?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);

 

[b]■ 什么是Promise和Deferred[/b] deferred表示异步操作的结果,提供了一个显示操作结果和状态的接口,并提供了一个可以获取该操作结果相关的promise实例。deferred是可以改变操作状态的。 promise提供了一个用来和相关deferred交互的接口。 当创建一个deferred,相当于一个pending状态; 当执行resolve方法,相当于一个resolved状态。 当执行reject方法,相当于一个rejected状态。 我们可以在创建deferred之后,定义回调函数,而回调函数在得到resolved和rejected的状态提示后开始执行。异步方法不需要知道回调函数如何操作,只需要在得到resolved或rejected状态后通知回调函数开始执行。 [b]■ 基本用法[/b] → 创建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');
})
以上就是本文的详细内容,希望对大家学习有所帮助,新年快乐!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部