Angular异步变同步处理⽅法
1. 背景
在前端项⽬中，经常会遇到页⾯有多个接⼝，后⼀个接⼝参数需要从前⼀个接⼝的返回数据中获取，这就存在接⼝必须按顺序⼀个⼀个执⾏。⽽Angular提供的Http服务请求接⼝都是异步请求，因此通常情况下会写成如下的代码：
funA(arg1,arg2,function(){
funcB(arg1,arg2,function(){
funcC(arg1,arg2,function(){
<
})
})
});
这不仅造成页⾯代码混乱不易维护，也让开发者⽆法追踪代码的运⾏。本⾝嵌套就已经不容易理解，加上不知何时才能触发回调，这就相当于雪上加霜。
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){
}else{
}
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){
}else{
}
return defer.promise;
}
function funB(num){
var defer = $q.defer();
if(num<5){
}else{
}
return defer.promise;
}
function funC(num){
var defer = $q.defer();
if(num<5){
}else{
}
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){
angular和angularjsconsole.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){
}else{
}
return defer.promise;
}
function funB(num){
var defer = $q.defer();
if(num<5){
}else{
}
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异步变同步处理⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论