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); ■ 如何处理多个异步方法 如果有很多异步方法需要按序执行呢？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');})以上就是本文的详细内容，希望对大家学习有所帮助，新年快乐！
Javacript,AngularJS,Promises
|
