javascript - How to design API interface gateway?

Currently, a page provides multiple interfaces to the front end, but each interface is independent. It is impossible to merge them together.
The front end wants to obtain data from multiple interfaces with one request. Therefore, I want to design a gateway. Front-end use.
The function is: pass in multiple request interfaces. assemble the data in each interface into an array at a time and return it to the front-end.
The current idea is to add a node layer in the middle.
Do you have any advice? Thank you

ps: The interfaces are merged redundantly, and the changes are huge~ and not conducive to expansion. Therefore, this method is currently abandoned

Reply content:

Currently, a page provides multiple interfaces to the front end, but each interface is independent. It is impossible to merge them together.
The front end wants to obtain data from multiple interfaces with one request. Therefore, I want to design a gateway. Front-end use.
The function is: pass in multiple request interfaces. assemble the data in each interface into an array at a time and return it to the front-end.
The current idea is to add a node layer in the middle.
Do you have any advice? Thank you

ps: The interfaces are merged redundantly, and the changes are huge~ and not conducive to expansion. Therefore, this method is currently abandoned

When merging interface data, you need to consider the data volume once the data is merged.
If you don’t need to consider this situation, you can directly open an additional interface on the backend and directly return all the data the frontend wants. This way there is no need to add an extra node layer in the middle

It can be realized, and the front-end ajax can be modified, such as modifying jQuery’s ajax

What we want to achieve is automatic merging of the front end. The logic is as follows:

<code>#1. 每当发起一个ajax请求时, 会暂存队列等待, 比如20ms
#2. 期间如果又发起了一个ajax请求, 该请求也会被放入队列, 等待下一个ajax()调用, 而20ms内没有ajax()调用, 则会拼接队列中的请求数据, 向服务端发起合并请求.
#3. 当然, 第一个ajax发起后, 会有个等待超时如80ms, 防止不停的等待, 第一个请求迟迟发不出
#4. GET和POST的队列分开
#5. 合并的请求数据结构, 如:
$.ajax({
    url: "http://mydomain.com/ajax_package",
    dataType:"text", // 数据类型为text, 需要分割解析, 把结果分配到指定请求回调
    data:{
        "actions":[ // 当然, 这个参数要json化, jQuery自动会urlencode
            {
                "callback": "pkg_callback_234244", // 创建回调handle
                "url": "ajax1_url",   // 请求1的url
                "data": "ajax1_data"  // 请求1的data
            },
            {
                "callback": "pkg_callback_424234", // 创建回调handle
                "url": "ajax2_url",   // 请求2的url
                "data": "ajax2_data"  // 请求2的data
            } // 更多合并的请求数据
        ]
    },
    success:function(res){
        dispatch(res); // 对响应内容进行数据提取并回调
    }
});</code>

Set the data specification returned by the background packaging interface, such as:

<code>>>>pkg_callback_234244
{"status":0, "error":null, "data":[1,2,3,4]}
<<<
>>>pkg_callback_424234
{"status":0, "error":null, "data":{"logined":true}}
<<<</code>

That is, the structure of each package is defined here as >>>{callback}n{data}n<<<
callback is added to the jQuery object when we process the queue, such as

<code>jQuery.pkg_callback_424234 = {
    success: fucntion(data){}, // 等于或封装了原ajax请求的success方法回调
    error: function(err){}
}</code>

Extract the data and callback, and then execute it

<code>jQuery.pkg_callback_424234.success.call(xhr, JSON.parse(data) );
// 移除回调
delete jQuery['pkg_callback_424234'];</code>

Merge the interface and give him all the data at once? ?