详解Javacript和AngularJS中的Promises
比如页面调用google地图的api时就使用到了promise。
functionsuccess(position){
varcords=position.coords;
console.log(coords.latitude+coords.longitude);
}
functionerror(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)
以上的代码是比较难维护的。
我们可以让所有的异步方法执行完毕后出来一个通知。
varcounter=N;
functionsuccess(){
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
varmyFirstDeferred=$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
varmyFirstPromise=myFirstDeferred.promise;
myFirstPromise
.then(function(data){
},function(error){
})
deferred可以有多个promise.
varanotherDeferred=$q.defer();
anotherDeferred.promise
.then(function(data){
},function(error){
})
//调用异步方法
async(anotherDeferred.resolve,anotherDeferred.reject);
anotherDeferred.promise
.then(function(data){
},function(error){
})
以上，如果异步方法async成功执行，两个success方法都会被调用。
→通常把异步方法包裹到一个函数中
functiongetData(){
vardeferred=$q.defer();
async(deferred.resolve,deferred.reject);
returndeferred.promise;
}
//deferred的promise属性记录了达到resolved,reject状态所需要执行的success和error方法
vardataPromise=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');
})
如果不管回调成功或失败都返回相同的结果呢？
varfinalCallback=function(){
console.log('不管回调成功或失败都返回这个结果');
}
dataPromise.then(finalCallback,finalCallback);
或
dataPromise.finally(finalCallback);
■值链式
假设有一个异步方法，使用deferred.resolve返回一个值。
functionasync(value){
vardeferred=$q.defer();
varresult=value/2;
deferred.resolve(result);
returndeferred.promise;
}
既然返回的是promise,我们就可以不断then,then下去的。
varpromise=async(8)
.then(function(x){
returnx+1;
})
.then(function(x){
returnx*2;
})
promise.then(function(x){
console.log(x);
})
以上，resolve出的值成为每一个链式的实参。
■Promise链式
functionasync1(value){
vardeferred=$q.defer();
varresult=value*2;
deferred.resolve(result);
returndeferred.promise;
}
functionasync2(value){
vardeferred=$q.defer();
varresult=value+1;
deferred.resolve(result);
returndeferred.promise;
}
varpromise=async1(10)
.then(function(x){
returnasync2(x);
})
promise.then(function(x){
console.log(x);
})
当然一种更易读的写法是：
functionlogValue(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的理由。
varpromise=async().then(function(value){
if(true){
returnvalue;
}else{
return$q.reject('valueisnotsatisfied');
}
})
■$q.when(value)
返回一个promise并带上值。
functiongetDataFromBackend(query){
vardata=searchInCache(query);
if(data){
return$q.when(data);
}else{
reutrnmakeAasyncBackendCall(query);
}
}
■$q.all(promisesArr)
等待所有promise执行完成。
varallPromise=$q.all([
async1(),
async2(),
...
asyncN();
])
allProise.then(function(values){
varvalue1=values[0],
value2=values[1],
...
valueN=values[N];
console.log('alldone');
})
以上就是本文的详细内容，希望对大家学习有所帮助，新年快乐！