Angular异步变同步处理方法

站长资源 2024/11/26 佚名

20 1538 20

DDR爱好者之家 Design By 杰米

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异步变同步处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Angular,异步,同步

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Angular异步变同步处理方法”

暂无评论...

Angular异步变同步处理方法

深入浅析angular和vue还有jquery的区别

利用JS实现一个同Excel表现的智能填充算法

评论“Angular异步变同步处理方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接