需求描述

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