接口combine

需求描述

进行复杂项目开发时，服务端(数据接口实现端)会把接口拆分的比较细粒度，以方便在更多地方复用。而拆分后的接口在前端进行组合请求时，通常会出现一个区块要请求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'],list,rolE) {
        console.log(err,rolE);
    });
},6000);

兼容之前的所有功能及cache，该功能需要后端根据约定配合，约定并非要按照前面描述的规则，可以自己定义，只需要在Magix.service.extend中自己处理好即可

@H_133_6@magix是一个区块化管理框架：https://github.com/thx/magix/...
项目地址：https://github.com/thx/magix欢迎star与fork

@H_944_2@