Angular异步变同步处理方法

在前端项目中,经常会遇到页面有多个接口,后一个接口参数需要从前一个接口的返回数据中获取,这就存在接口必须按顺序一个一个执行。而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()的错误信息 });

结果:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a33f348f2a9cd100195eb702e9a088ff.html