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异步变同步处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇AngularJS集合数据遍历显示的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了详解AngularJS脏检查机制及$timeout的妙用，“脏检查”是Angular中的核心机制之一，它是实现双向绑定、MVVM模式的重要基础，有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了AngularJS安装版本问题解析,在这需要注意在安装前请确保自己安装NodeJS环境版本为V18及以上，否则会因node版本问题导致项目无法正常运行，需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Angular将填入表单的数据渲染到表格的方法，非常具有实用价值，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了小谈angular ng deploy的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
anime.js是一个灵活的轻型JavaScript动画库。这篇文章主要介绍了anime.js 实现带有描边动画效果的复选框 ,需要的朋友可以参考下2017-12-12
下面小编就为大家带来一篇angular $watch 一个变量的变化(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
下面小编就为大家带来一篇Augularjs-起步详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了AngularJS常见过滤器用法,结合实例形式总结分析了AngularJS大小写过滤器、货币过滤器、日期过滤器、limitTo过滤器、orderBy过滤器及自定义过滤器使用方法,需要的朋友可以参考下2017-07-07
本文主要介绍AngularJS模板的资料知识，这里帮大家整理了详细的模版资料，及实现示例代码，帮助大家学习AngularJS的知识，有需要的小伙伴可以参考下2016-08-08
最新评论