众所周知,angular.js(angular 1.x)是由Google公司开发并维护的热门前端框架, 由于公司内部的一些项目用angluar比较早,所以做项目的时候直接以angular起手的,在项目中遇到过一些前端接口调用的问题,对于一些页面需要调用多个接口的情况, 开始是用anguarl的$watch来处理, 但是angular对数据做的是脏检查, watch越多就越慢,性能就越会下降.
angular中有很多的系统服务, 例如: $http、$timeout、$rootScope、$locale等
由于项目中暂时不支持es6的Promise和async用法, 所以angular的$q服务 可以完美解决接口调用中的问题.
场景一:
在当前页面中, 我需要同时调用3个或多个接口, 我需要在调用的所有接口都返回成功的时候,把页面的loading关掉展示 页面数据,如果用$watch写的话,代码可能是这样:
不推荐写法
// 初始化
$scope.loading = true; //控制页面loadinng
$scope.api1_result = false;
$scope.api2_result = false;
$scope.api3_result = false;
......
function api1(){
// 等待ajax请求返回请求结果
$scope.api1_result = true;
}
function api2(){
// ajax请求返回请求结果
$scope.api2_result = true;
}
function api3(){
// ajax请求返回请求结果
$scope.api3_result = true;
}
// 监听每个接口响应的结果, 如果成功响应 该变量置为true
$scope.$watch('api1_result ', function(newValue, oldValue){
if(newValue) {
$scope.loading = false;
}
});
$scope.$watch('api2_result ', function(newValue, oldValue){
if(newValue) {
$scope.loading = false;
}
});
$scope.$watch('api3_result ', function(newValue, oldValue){
if(newValue) {
$scope.loading = false;
}
});
这种写法, 显然不妥当, 多个接口会定义多个watch监听对象, 如果在移动端 会十分影响应用的性能,这个时候我们可以使用$q的all()方法, $q.all()会把多个promise对象放入一个数组中, 在所有promise对象全部resolve的时候 执行
语法为 $q.all([fun1(), ...funN()])
首先 $q是系统服务, 需要通过angular的依赖注入特性, 将该服务注入到我们的应用中
推荐写法
var app = angular.module('', []);
app.controller('myController', function($scope, $http, $q){
function api1(){
var defer = $q.defer();
// 接口调用
$http.post('/urlpath',{}).then(function(res){
if(0 == res.errcode){
defer.resolve();
}
})
return defer.promise;
}
})
function api2(){
var defer = $q.defer();
// 接口调用
$http.post('/urlpath',{}).then(function(res){
if(0 == res.errcode){
defer.resolve();
}
})
return defer.promise;
}
})
function api3(){
var defer = $q.defer();
// 接口调用
$http.post('/urlpath',{}).then(function(res){
if(0 == res.errcode){
defer.resolve();
}
})
return defer.promise;
}
})
$q.all([api1(), api2(), api3()]).then(function(res){
// 3个并行接口全部resolve
$scope.loading = false;
})
怎么样 是不是写法很简单,而且逻辑很清晰? 并且不会影响性能?
场景二:
页面需要调用多个接口, 并且这些接口有直接的关联, 调用第一个接口后响应的结果 是第二个接口的入参, 第二个接口的响应结果 是第三个接口的入参. 我假设了这种情况:
需要先调用客户端版本号接口, 再根据版本号 调用用户地区和是否是VIP用户, 最后再调用用户实际的推荐商品列表,
我们知道, 客户端的网络情况很复杂, 并且每个接口的响应时间都会根据用户所处的环境和网络的改变而改变,是不确定的(Equivocal)
但如果我们直接在页面中调用三个接口, 不能直接就在各自的.then()方法中去获取返回结果,因为由于网络原因和用户环境,不能保证这是三个接口是按我们想要的顺序来执行的, 很可能第一个接口还没跑完, 第三个接口就返回了, 这样我们得到的数据就是错误的.
那这种情况前端该怎么处理呢? 直接上代码:
var app = angular.module('', []);
app.controller('myController', function($scope, $http, $q){
// 第1步, 获取用户版本号
function getVersion(){
var defer = $q.defer(); // 实例化defer方法的对象
// 接口调用
$http.post('/urlpath',{}).then(function(res){
if(0 == res.errcode){
defer.resolve(res.version); // 接口返回的版本号
}
})
return defer.promise; // 该函数返回一个promise对象
}
// 第2步, 获取用户地区和是否是VIP
function getAddressAndIsVIP(param){ // 此处的形参是第一个版本号接口resolve出来的值
var defer = $q.defer();
// 接口调用
$http.post('/urlpath',{
data: param // 版本号resolve的值 带入参数中
}).then(function(res){
if(0 == res.errcode){
defer.resolve(res.userinfo); // 接口返回用户地区信息和是否VIP
}
})
return defer.promise;
}
// 第3步, 根据用户信息返回推荐给用户的商品列表
function getList(userinfo){
var defer = $q.defer(); // 实例化defer方法的对象
// 接口调用
$http.post('/urlpath',{
data: userinfo // 此处是由第二个接口resolve出来的用户信息对象
}).then(function(res){
if(0 == res.errcode){
$scope.list = res.data.userCommendList; // 拿到最终数据
defer.resolve('success'); // 可随便写
}
})
return defer.promise;
}
}
方法写好了,我们如何调用呢?
getVersion().then(function(res1){ // getVersion响应成功后
// 此处res1 是用户版本号
// 带入接口2
return getAddressAndIsVIP(res1)
}).then(function(res2){
// 此处res2是 第二个接口返回的用户信息userinfo
// 带入接口3
return getList(res2) // getList响应成功后
}).then(function(res){
// 最终拿到列表的接口我resolve的是success
// 在接口同步调用成功后可以这样写
if('success' == res){
$scope.loading = false; // 关闭页面loading
}
})
