Javascript-how is API Gateway designed?

Currently, a page provides multiple interfaces for the front-end, but each interface is independent. it cannot be merged. the front-end requests data from multiple interfaces at a time. therefore, we want to design a gateway. for front-end use. function: Input Multiple request interfaces. assemble the data in each interface into an array at a time... currently, a page provides multiple interfaces for the front-end, but each interface is independent. it cannot be merged.
The front-end wants to request data from multiple interfaces at a time, so it wants to design a gateway for the front-end to use.
Function: Input Multiple request interfaces and assemble an array of data in each interface at a time to return to the front-end.
The current idea is to add a node layer in the middle.
Do you have any suggestions? Thank you.

Ps: interfaces are redundant and greatly changed ~ This method is not conducive to expansion.

Reply content:

Currently, a page provides multiple interfaces for the front end, but each interface is independent. it cannot be merged.
The front-end wants to request data from multiple interfaces at a time, so it wants to design a gateway for the front-end to use.
Function: Input Multiple request interfaces and assemble an array of data in each interface at a time to return to the front-end.
The current idea is to add a node layer in the middle.
Do you have any suggestions? Thank you.

Ps: interfaces are redundant and greatly changed ~ This method is not conducive to expansion.

To merge interface data, consider thatData volume.
If you do not need to consider this situation, you can directly open an interface on the backend to directly return all the data that the front-end wants. So there is no need to add a node layer in the middle.

Yes, and the front-end ajax is modified, such as the jQuery ajax

To achieve automatic front-end merge, the logic is as follows:

#1. each time an ajax request is initiated, the queue waits temporarily, for example, 20 ms #2. if another ajax request is initiated during this period, the request will also be put into the queue, waiting for the next ajax () call, and no ajax () call within 20 ms, the request data in the queue is spliced and the merge request is sent to the server. #3. of course, after the first ajax request is initiated, there will be a wait timeout period such as 80 ms to prevent endless waiting. The first request will not be sent again. #4. separate GET and POST queues #5. the merged request data structure, for example, $. ajax ({url: "http://mydomain.com/ajax_package", dataType: "text", // The data type is text and needs to be parsed separately, and the result is allocated to the specified request callback data: {"actions ": [// of course, this parameter must be json-formatted. jQuery will automatically urlencode {"callback": "pkg_callback_234244", // create callback handle "url": "ajax1_url ", // url of request 1 "data": "ajax1_data" // data of request 1}, {"callback": "pkg_callback_0000234", // create callback handle "url ": "ajax2_url", // request 2 url "data": "ajax2_data" // request 2 data} // More merged request data]}, success: function (res) {dispatch (res); // Extract and callback the response content }});

Set the data specifications returned by the backend packaging interface, such:

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

That is, the structure of each package is defined here as >>{ callback} n {data} n <
Callback is added to the jQuery object during queue processing, as shown in figure

JQuery. pkg_callback_0000234 = {success: fucntion (data) {}, // callback error: function (err) {}} equals to or encapsulates the success method of the original ajax request ){}}

Extract data, and callback to execute

JQuery. pkg_callback_0000234.success.call (xhr, JSON. parse (data); // remove the callback delete jQuery ['pkg _ callback_0000234 '];

The merge operation returns all data to him at one time ??