Skip to content
This repository has been archived by the owner on Nov 12, 2024. It is now read-only.

接口combine #25

Open
xinglie opened this issue Aug 30, 2016 · 2 comments
Open

接口combine #25

xinglie opened this issue Aug 30, 2016 · 2 comments

Comments

@xinglie
Copy link
Member

xinglie commented Aug 30, 2016

需求描述

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

xinglie added a commit that referenced this issue Aug 30, 2016
@xinglie
Copy link
Member Author

xinglie commented Aug 30, 2016

功能默认不开启,需要自己重新编译,而且在实现的时候,我们使用post向combine接口发送请求,对于一些接口是get,且参数较少的情况下,combine接口用get是更好的选择。这块细节需要在项目使用中再去调整和优化

@xinglie
Copy link
Member Author

xinglie commented Jun 1, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant