需求描述

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