接口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'], 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

    原文作者:行列
    原文地址: https://segmentfault.com/a/1190000006765210
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞