接口combine

EddieChan 發(fā)布于2019-08-20 10:39 / 1141人閱讀

摘要：需求描述進(jìn)行復(fù)雜項(xiàng)目開發(fā)時(shí)，服務(wù)端數(shù)據(jù)接口實(shí)現(xiàn)端會(huì)把接口拆分的比較細(xì)粒度，以方便在更多地方復(fù)用。

需求描述

進(jìn)行復(fù)雜項(xiàng)目開發(fā)時(shí)，服務(wù)端(數(shù)據(jù)接口實(shí)現(xiàn)端)會(huì)把接口拆分的比較細(xì)粒度，以方便在更多地方復(fù)用。而拆分后的接口在前端進(jìn)行組合請(qǐng)求時(shí)，通常會(huì)出現(xiàn)一個(gè)區(qū)塊要請(qǐng)求5、6個(gè)接口甚至更多接口請(qǐng)求才能拿到想要的數(shù)據(jù)，過多的數(shù)據(jù)請(qǐng)求會(huì)導(dǎo)致區(qū)塊渲染較慢，移動(dòng)端表現(xiàn)尤為明顯。
為了改善這種情況，也有在服務(wù)端再開發(fā)一些新接口來進(jìn)行combine前端需要用的接口，不過開發(fā)和維護(hù)都不是很好，我們應(yīng)該把這個(gè)過程自動(dòng)化掉

思路

類比cdn文件combine的思路，前端在請(qǐng)求時(shí)對(duì)接口動(dòng)態(tài)combine，后端有一個(gè)專門處理combine接口的服務(wù)接口。我們?cè)谶@個(gè)過程中約定好前后端的數(shù)據(jù)格式即可

約定

假設(shè)我們要請(qǐng)求如下2個(gè)接口

接口：
  users/list
參數(shù)：
  status=1
  name=xl

接口：
  users/role
參數(shù)：
  id=20

我們假設(shè)客戶端對(duì)上述2個(gè)接口combine后發(fā)送如下格式的請(qǐng)求到服務(wù)端

接口
  api/combine
參數(shù)
  apis=[{
      url:"users/list",
      body:{
          status:1,
          name:xl
      }
  },{
      url:"users/role",
      body:{
          id:20
      }
  }]

服務(wù)端實(shí)現(xiàn)一個(gè)固定的api/combine接口，接收到上述數(shù)據(jù)后，內(nèi)部再去請(qǐng)求相應(yīng)的接口，拿到數(shù)據(jù)后返回如下的數(shù)據(jù)格式

{
    "users/list":{data:{},ok:true},
    "users/role":{data:{},ok:true}
}

在Magix中的應(yīng)用

var Service = Magix.Service.extend(function(bag, callback) {
    var bags = bag.get("bags", []); //啟用接口combine后，所有的請(qǐng)求都會(huì)走combine，Magix內(nèi)部會(huì)把要請(qǐng)求的bag對(duì)象放到bags數(shù)組內(nèi)
    var data = [];
    for (var i = 0; i < bags.length; i++) {
        var params = bags[i].get("params"); //單個(gè)接口要發(fā)送給服務(wù)端的數(shù)據(jù)
        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++) {//拆分統(tǒng)一返回的數(shù)據(jù)
                var url = bags[i].get("url");
                var d = responseData[url];//根據(jù)url讀取相應(yīng)的數(shù)據(jù)
                if (d) {
                    bags[i].set("data", d);//設(shè)置數(shù)據(jù)
                }
            }
            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，該功能需要后端根據(jù)約定配合，約定并非要按照前面描述的規(guī)則，可以自己定義，只需要在Magix.Service.extend中自己處理好即可

Magix是一個(gè)區(qū)塊化管理框架：https://github.com/thx/magix/...
項(xiàng)目地址：https://github.com/thx/magix
歡迎star與fork