角度异步变量同步处理方法

1.背景

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

付娜(arg1，arg2，function(){ funcB(arg1，arg2，function(){ funcC(arg1，arg2，function(){ xxxx.}) }) });这不仅使页面代码变得混乱和难以维护，而且使开发人员无法跟踪代码的运行。嵌套本身不容易理解，不知道什么时候触发回调，相当于雪上加霜。

2.承诺

针对这种现象，Angular引入了Promise规范，可以帮助开发人员将异步转化为同步，是一种预定义的执行结果的不确定性。例如，在下面的代码中，当getData方法中的对象成功执行时，将调用success方法，如果失败，将调用error方法。此外，除了then方法，promise也有catch()和finally()方法。

推迟。getData()。然后(funcSuccess (){}，funcError (){})。catch(function(){})。final(function(){ })；Finally()方法通常用于处理将要执行的操作，而不管承诺返回成功还是失败。比如ion中的上拉负载，获取数据后，无论成功还是失败，都需要广播上拉操作结束，可以用finally()方法写入。

3.$q服务

q服务是一个Promise实现，它自己封装在AngularJs中，通常有以下三种常见方法：

Defer():创建一个Defer对象，可以执行几种常用的方法，比如解析、拒绝、通知等。

All():传入Promise数组，批量执行，返回Promise对象；

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

3.1.defer()方法

在$q服务中，使用defer()方法创建了一个defer对象，然后这个对象可以调用resolve方法来定义成功状态，使用reject方法来定义失败状态，并且可以在这些方法中传递参数。通常，接口返回的数据通过这些方法传递出去。最后，延期对象返回一个承诺对象。承诺定义当时的方法。then方法中有三个参数，分别是成功回调、失败回调和状态改变回调。

定义方法：

函数付娜(num){ var defer=$ q . defer()；if(num 5){ delay . resolve('付娜成功')；} else { defer.reject('付娜错误')；} return .许诺；}方法调用(成功返回):

付娜(3)。然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；})结果：

方法调用(返回失败):

付娜(8)。然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；})结果：

3.2.连锁电话

在理解了defer()方法和then()方法之后，我们可以解决多个接口的嵌套调用问题。

一般来说，当处理多个接口需要嵌套执行时，可以采用角链调用，即：

FunA.then()。然后()。然后()；在then方法中，返回要调用的下一个接口。下面的付娜、funB和funC是返回promise对象的方法。如果执行顺序是付娜、funB和funC，则可以用链调用它们。

函数付娜(num){ var defer=$ q . defer()；if(num 5){ delay . resolve('付娜成功')；} else { defer.reject('付娜错误')；} return .许诺；} funB(num)函数{ var delay=$ q . delay()；if(num 5){ delay . resolve(' FunB success ')；} else { delay . reject(' FunB错误')；} return .许诺；} funC funC(num){ var delay=$ q . delay()；if(num 5){ delay . resolve(' FuNC success ')；} else { delay . reject(' FuNC error ')；} return .许诺；}方法调用：

付娜(3)。然后(函数(成功){ console.log(成功)；返回FunB(3)；}).然后(函数(成功){ console.log(成功)；返回FuNC(3)；}).然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；});结果：

在上述方法调用中，只有参数成功的方法才会被写入then()方法中。如果其中一个方法调用失败，这个方法后面的方法将不会再次执行，也就是说，这个方法后面的方法只有在前一个方法调用成功的情况下才能被调用。下面是其中一种方法失败的例子。如果funB方法调用返回失败，则不会再次执行funC，错误信息将在最终捕获错误信息的参数方法中获得。

方法调用：

付娜(3)。然后(函数(成功){ console.log(成功)；返回FunB(8)；}).然后(函数(成功){ console.log(成功)；返回FuNC(3)；}).然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；//打印funB ()})的错误消息；结果：

如果在某些情况下，在调用了前一个方法之后，无论该方法是否被成功调用，后续的方法都将继续被调用，则有必要向then()方法添加一个错误回调，并返回下一个执行承诺。如下所示：

付娜(3)。然后(函数(成功){ console.log(成功)；返回FunB(8)；}，函数(err){ console . log(err)；返回FunB(8)；}).然后(函数(成功){ console.log(成功)；返回FuNC(3)；}，函数(err){ console . log(err)；返回FuNC(3)；}).然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；});结果：

3.3.all()方法

all()方法可以将多个promise数组组合成一个数组。当所有承诺成功执行时，将执行以下回调，回调中的参数是每个承诺执行的结果。

函数付娜(num){ var defer=$ q . defer()；if(num 5){ delay . resolve('付娜成功')；} else { defer.reject('付娜错误')；} return .许诺；} funB(num)函数{ var delay=$ q . delay()；if(num 5){ delay . resolve(' FunB success ')；} else { delay . reject(' FunB错误')；} return .许诺；}方法调用：

$q.all([付娜(3)，福纳(3) ])。然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；})结果：

all()方法中的参数可以是上述数组形式或json格式。因此，如果参数是数组格式，返回的数据格式也是数组格式；如果参数是json格式，返回的数据格式也是json格式。json参数的示例如下：

$ q . all({ funa : deferservice . funa(3)，funB:DeferService.funB(3) })。然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；})结果：

以上两个例子说明了数据采集的成功。all()方法的参数出现承诺失败时，整个任务都会失败，返回的数据只会返回失败参数的失败信息。

方法调用：

$ q . all({ funa : deferservice . funa(8)，//调用失败//正常情况下，调用是成功的，但是由于付娜调用失败，这个方法也失败了。funb : deferservice . funn(3)})。然后(函数(成功){console.log(。}，函数(err){ console . log(err)；})结果：

3.4.when()方法

when()方法中的参数可以是值，也可以是承诺。此方法将传入的参数处理打包成一个承诺。当您不确定正在处理的对象或正在调用的方法是否是承诺时，通常会使用此方法。

例如，在下面的示例中，val=10不是一个承诺，但它可以由。然后()方法被when()方法包裹后，就跟普通的诺言一样。

var val=10$q.when(val)。然后(函数(成功){ console.log(成功)；}，函数(err){ console . log(err)；});结果：

以上Angular异步同步处理方法是边肖分享的全部内容，希望能给大家一个参考和支持。