接口combine

EddieChan 发布于2019-08-20 10:39 / 1108人阅读

摘要：需求描述进行复杂项目开发时，服务端数据接口实现端会把接口拆分的比较细粒度，以方便在更多地方复用。

需求描述

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

GPU云服务器云服务器 Combining Combinations Combination Combine

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80251.html

Stream流与Lambda表达式（二) Stream收集器 Collector接口

摘要：一收集器接口陈杨收集器接口汇聚操作的元素类型即流中元素类型汇聚操作的可变累积类型汇聚操作的结果类型接口一种可变汇聚操作将输入元素累积到可变结果容器中在处理完所有输入元素后可以选择将累积的结果转换为最终表示可选操作归约操作一、Stream收集器 Collector接口 package com.java.design.java8.Stream; import com.java.desi...

or0fun 2019-08-16 15:13 评论0 收藏0
TensorFlow Wide And Deep 模型详解与应用

摘要：我们先看看的初始化函数的完整定义，看构造一个模型可以输入哪些参数我们可以将类的构造函数中的参数分为以下几组基础参数我们训练的模型存放到指定的目录中。看完模型的构造函数后，我们大概知道和端的模型各对应什么样的模型，模型需要输入什么样的参数。 Wide and deep 模型是 TensorFlow 在 2016 年 6 月左右发布的一类用于分类和回归的模型，并应用到了 Google Play ...

opengps 2019-04-25 18:17 评论0 收藏0
Java8 collector接口的定制实现

摘要：写这个文章其实主要是因为刚有个童鞋问了个问题正写的带劲安利的实现方式，结果还没写完无意发现问题被关闭了哎都写了一半了又不想放弃，就干脆写成文章问题主要就是把集合里的数据按照一定大小顺序平均分成若干组的问题，看起来挺简单的，不过我开始看到就想写这个文章其实主要是因为刚有个童鞋问了个问题https://segmentfault.com/q/10...正写的带劲安利Java8的实现方式，结...

zhangwang 2019-08-16 12:08 评论0 收藏0
Stream流与Lambda表达式（四）自定义收集器

摘要：一自定义收集器陈杨将集合转换为集合存放相同元素二自定义收集器陈杨将学生对象按照存放从中间容器数据类型转换为结果类型数据类型一致若不一致抛出类型转换异常对中间容器数据结果类型进行强制类型转换多个线程同时操作同一个容器并行多线一、自定义SetCustomCollector收集器 package com.java.design.Stream.CustomCollector; impor...

wind5o 2019-08-16 15:13 评论0 收藏0