Angular异步变同步处理方法
72 浏览量
2020-10-18
06:02:03
上传
评论
收藏 68KB PDF 举报
Angular异步变同步处理方法异步变同步处理方法
今天小编就为大家分享一篇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);
})
结果：
资源评论
