详解Javacript和AngularJS中的Promises

前端之家收集整理的这篇文章主要介绍了详解Javacript和AngularJS中的Promises前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

比如页面调用google地图的api时就使用到了promise。

function error(err){
console.warn(err.code+err.message)
}

navigator.geolocation.getCurrentPosition(success,error);

■ 如何处理多个异步方法

如果有很多异步方法需要按序执行呢?async1(success,failure),async2(success,...asyncN(success,该如何处理呢?

最简单的,可能会这样写:

以上的代码是比较难维护的。

我们可以让所有的异步方法执行完毕后出来一个通知

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)

在AngularJS中,$q的resolve和reject不依赖上下文,大致可以这样写:

async(myFirstDeferred.resolve,myFirstDeferred.reject);

→ 使用deferred中的promise

myFirstPromise
.then(function(data){

},function(error){

})

deferred可以有多个promise.

anotherDeferred.promise
.then(function(data){

},function(error){

})

//调用异步方法
async(anotherDeferred.resolve,anotherDeferred.reject);

anotherDeferred.promise
.then(function(data){

},function(error){

})

以上,如果异步方法async成功执行,两个success方法都会被调用

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

//deferred的promise属性记录了达到resolved,reject状态所需要执行的success和error方法
var dataPromise = getData();
dataPromise
.then(function(data){
console.log('success');
},function(error){
console.log('error');
})

如果只关注success回调函数该如何写呢?

如果只关注error回调函数该如何写呢?

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

如果不管回调成功或失败都返回相同的结果呢?

dataPromise.then(finalCallback,finalCallback);

dataPromise.finally(finalCallback); ■ 值链式

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

既然返回的是promise,我们就可以不断then,then下去的。

promise.then(function(x){
console.log(x);
})

以上,resolve出的值成为每一个链式的实参。

■ 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(10)
.then(async2)
.then(logValue);

async1方法的返回值成为then方法中的success方法中的实参。

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

■ $q.reject(reason)

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

■ $q.when(value)

返回一个promise并带上值。

■ $q.all(promisesArr)

等待所有promise执行完成。

allProise.then(function(values){
var value1 = values[0],value2 = values[1],...
valueN = values[N];

console.log('all done');
})

以上就是本文的详细内容,希望对大家学习有所帮助,新年快乐!

猜你在找的JavaScript相关文章