需求形貌
举行庞杂项目开辟时,效劳端(数据接口完成端)会把接口拆分的比较细粒度,以方便在更多处所复用。而拆分后的接口在前端举行组合要求时,通常会涌现一个区块要要求5、6个接口以至更多接口要求才拿到想要的数据,过量的数据要求会致使区块衬着较慢,挪动端表现尤其显著。
为了改良这类状况,也有在效劳端再开辟一些新接口来举行combine前端须要用的接口,不过开辟和保护都不是很好,我们应当把这个历程自动化掉
思绪
类比cdn文件combine的思绪,前端在要求时对接口动态combine,后端有一个特地处置惩罚combine接口的效劳接口。我们在这个历程当中商定好前后端的数据花样即可
商定
假定我们要要求以下2个接口
接口:
users/list
参数:
status=1
name=xl
接口:
users/role
参数:
id=20
我们假定客户端对上述2个接口combine后发送以下花样的要求到效劳端
接口
api/combine
参数
apis=[{
url:'users/list',
body:{
status:1,
name:xl
}
},{
url:'users/role',
body:{
id:20
}
}]
效劳端完成一个牢固的api/combine接口,吸收到上述数据后,内部再去要求响应的接口,拿到数据后返回以下的数据花样
{
'users/list':{data:{},ok:true},
'users/role':{data:{},ok:true}
}
在Magix中的运用
var Service = Magix.Service.extend(function(bag, callback) {
var bags = bag.get('bags', []); //启用接口combine后,一切的要求都邑走combine,Magix内部会把要要求的bag对象放到bags数组内
var data = [];
for (var i = 0; i < bags.length; i++) {
var params = bags[i].get('params'); //单个接口要发送给效劳端的数据
data.push({
url: bags[i].get('url'),
body: params
});
}
$.ajax({
url: 'api/combine',
data: 'apis=' + JSON.stringify(data),
dataType: 'json',
type:'post',
success: function(responseData) {
for (var i = 0; i < bags.length; i++) {//拆分一致返回的数据
var url = bags[i].get('url');
var d = responseData[url];//依据url读取响应的数据
if (d) {
bags[i].set('data', d);//设置数据
}
}
callback();
}
});
});
Service.add([{
name: 'list',
url: 'users/list',
cache: 100000
}, {
name: 'role',
url: 'users/role'
}]);
运用
var s1 = new Service();
s1.all('list', function(err, list) {
console.log(err, list);
});
setTimeout(function() {
var s = new Service();
s.all(['list', 'role'], function(err, list, role) {
console.log(err, list, role);
});
}, 6000);
兼容之前的一切功用及cache,该功用须要后端依据商定合营,商定并不是要根据前面形貌的划定规矩,能够本身定义,只须要在Magix.Service.extend中本身处置惩罚好即可
Magix是一个区块化治理框架:https://github.com/thx/magix/…
项目地点:https://github.com/thx/magix
迎接star与fork