Angular异步变同步处理方法

1. 背景

在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而Angular提供的Http服务请求接口都是异步请求,因此通常情况下会写成如下的代码:

funA(arg1,arg2,function(){

funcB(arg1,arg2,function(){

funcC(arg1,arg2,function(){

xxxx....

})

})

});

这不仅造成页面代码混乱不易维护,也让开发者无法追踪代码的运行。本身嵌套就已经不容易理解,加上不知何时才能触发回调,这就相当于雪上加霜。

2. Promise

针对这中现象,Angular推出了Promise规范,它可以帮助开发者将异步变成同步,是一种对执行结果不确定的一种预先定义。例如以下代码中,当getData方法内的对象成功执行,就会调用success方法,如果失败,就会调用error方法。另外promise除了then方法之外,还有catch()与finally()方法。

defer. getData()

.then( funcSuccess (){}, funcError (){} )

.catch( function(){})

.finally( function(){});

Finally()方法一般用来处理不管promise是返回成功还是失败,都会执行的操作。例如ionic中的上拉加载,当获取数据后不管成功或者失败,都要广播结束这次上拉操作,便可将这个操作写在finally()方法中。

3. $q服务

q服务是AngularJs中自己封装实现的一种Promise实现,一般有如下三个常用方法:

defer() :创建一个deferred对象,这个对象可以执行几个常用的方法,比如resolve,reject,notify等;

all() :传入Promise的数组,批量执行,返回一个Promise对象;

when() :传入一个不确定的参数,如果符合Promise标准,就返回一个Promise对象。

3.1. defer() 方法

在$q服务中,用defer()方法创建一个deferred对象,然后这个对象可以调用resolve方法定义成功状态,使用reject方法定义失败状态,并且可以在这些方法中传递参数,一般接口返回的数据都是用这些方法传递出去。最后通过deferred对象 .promise来返回一个promise对象,来定义then方法。then方法中有三个参数,分别是成功回调、失败回调、状态变更回调。

定义方法:

function funA(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funA success');

}else{

defer.reject('funA error');

}

return defer.promise;

}

方法调用(返回成功):

funA(3).then(function(success){

console.log(success);

},function(err){

console.log(err);

})

结果:

方法调用(返回失败):

funA(8).then(function(success){

console.log(success);

},function(err){

console.log(err);

})

结果:

3.2. 链式调用

了解了defer()方法与then()方法,接下来就能解决多个接口嵌套调用的问题了。

一般处理多个接口需要嵌套执行时,可采用angular的链式调用,即:

FunA.then().then().then();

在then方法中return 要调用的下一个接口。如下funA、funB、funC都是返回了promise对象的方法,如果执行顺序为funA、funB、funC,则可用链式调用。

function funA(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funA success');

}else{

defer.reject('funA error');

}

return defer.promise;

}

function funB(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funB success');

}else{

defer.reject('funB error');

}

return defer.promise;

}

function funC(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funC success');

}else{

defer.reject('funC error');

}

return defer.promise;

}

方法调用:

funA(3).then(function(success){

console.log(success);

return funB(3);

}).then(function(success){

console.log(success);

return funC(3);

}).then(function(success){

console.log(success);

},function(err){

console.log(err);

});

结果:

上述方法调用中,then()方法中只写了成功参数的方法,如果其中一个方法调用返回失败,则该方法后边的方法都不会再执行,也就是只有前一个方法调用成功,才能调用后边的方法。如下为其中一个方法失败的示例,funB方法调用返回失败,则不会再执行funC,而错误的信息会在最后捕捉错误信息的参数方法中获取。

方法调用:

funA(3).then(function(success){

console.log(success);

return funB(8);

}).then(function(success){

console.log(success);

return funC(3);

}).then(function(success){

console.log(success);

},function(err){

console.log(err); //打印funB()的错误信息

});

结果:

如果在某些场景中,等前一个方法调用完毕,而不管这个方法是否调用成功,都要继续调用后边的方法,则需要在then()方法中增加错误回调并return 下一个执行的promise。如下:

funA(3).then(function(success){

console.log(success);

return funB(8);

},function(err){

console.log(err);

return funB(8);

}).then(function(success){

console.log(success);

return funC(3);

},function(err){

console.log(err);

return funC(3);

}).then(function(success){

console.log(success);

},function(err){

console.log(err);

});

结果:

3.3. all() 方法

all()方法可以把多个promise的数组合并成一个。当所有的promise执行成功后,会执行后面的回调,回调中的参数,是每个promise执行的结果。

function funA(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funA success');

}else{

defer.reject('funA error');

}

return defer.promise;

}

function funB(num){

var defer = $q.defer();

if(num<5){

defer.resolve('funB success');

}else{

defer.reject('funB error');

}

return defer.promise;

}

方法调用:

$q.all([

funA(3),

funB(3)

])

.then(function(success){

console.log(success);

},function(err){

console.log(err);

})

结果:

all() 方法中的参数可以是上面的数组形式,也可以是json格式。相应的,如果参数是数组格式,那么返回的数据格式也是数组格式;如果参数是json格式,那么返回的数据格式也是json格式。json参数示例如下:

$q.all(

{

funA:DeferService.funA(3),

funB:DeferService.funB(3)

})

.then(function(success){

console.log(success);

},function(err){

console.log(err);

})

结果:

上面两个示例展示的都是获取数据成功的情况。而当all()方法的参数中存在一个promise失败,则整个任务都失败,返回的数据也只会返回该失败参数的失败信息。

方法调用:

$q.all(

{

funA:DeferService.funA(8), //调用失败

//正常情况下是调用成功,但由于funA调用失败,固该方法也是失败

funB:DeferService.funB(3)

})

.then(function(success){

console.log(success);

},function(err){

console.log(err);

})

结果:

3.4. when() 方法

when()方法中的参数可以是一个值,也可以是一个promise,这个方法是把传入的参数处理包装成一个promise。这个方法一般在你不确定所处理的对象或者调用的方法是不是一个promise时使用。

例如在下面的例子中,val=10,并不是一个promise,但是经过when()方法包装之后,可以通过.then()方法去调用,像处理平常的promise一样。

var val=10;

$q.when(val)

.then(function(success){

console.log(success);

},function(err){

console.log(err);

});

结果:

以上这篇Angular异步变同步处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 Angular异步变同步处理方法 的全部内容, 来源链接: utcz.com/z/339694.html

回到顶部