异步函数请求堆栈-解决页面多并发问题

SpreadJS提供了异步函数的功能，可以让函数通过调用API异步获取数据。但是当页面上使用的异步函数较多，刷新计算时会同时发生大量的网络请求，不仅给服务器造成压力，也会由于异步函数的同时更新造成页面的频繁刷新，影响用户体验。

为了解决这个问题，我们可以采用请求堆栈的方式，收集函数请求，统一发送网络请求并一次更新。
具体更新时机机制可以根据我们业务需求决定，下面以定时请求为例说明具体实现。
当第一个请求发生1秒后，发起一次网络请求。1秒内有其他请求进入就收集进堆栈，后续请求放入下一个堆栈，以此类推。

下面代码是一个普通异步函数GETNUMBERFROMSERVER的实现，调用getData接口（模拟接口直接返回arg1数据，未做其他处理），传递参数，获取显示内容并展示在单元格。

1.     var GetNumberFromServer = function () {
   
2.     };
   
3.     GetNumberFromServer.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction("GETNUMBERFROMSERVER", 1, 2);
   
4.     GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
   
5.     fetch("/spread/getData?data="+arg1)
   
6.     .then(function(response) {
   
7.         return response.text();
   
8.     })
   
9.     .then(function(text) {
   
10.         context.setAsyncResult(text);
    
11.     });
    
12.     };
    
13.     GC.Spread.CalcEngine.Functions.defineGlobalCustomFunction("GETNUMBERFROMSERVER", new GetNumberFromServer());
    

复制代码

为了减少请求，我们使用一个缓存对象存放请求数据，定时调用接口处理

1. let callStack = {}; //收集请求数据
   
2. let callingStack = {}; //缓存正在请求中的数据信息
   
3. let callStackCount = 0; //请求数量，当作请求ID，用于区分请求内容
   
4. let timingId = 0; //用于判断当前是否有定时器等待请求中

复制代码

定义请求方法，代替再函数中直接调用API接口

1. 
   
2. // data 请求数据
   
3. // context 异步函数context, 网络请求结束后回调时使用
   
4. // callback 回调函数
   
5. function stackCall(data, context, callback){
   
6.     let id = callStackCount++;
   
7.     callStack[id] = {};
   
8.     callStack[id].data = data;
   
9.     callStack[id].context = context;
   
10.     callStack[id].callback = callback;
    
11. 
    
12.     if(timingId === 0){ // 同时只有一个定时器
    
13.         timingId = setTimeout(function(){
    
14.             callingStack = callStack;
    
15.             callStack = {};
    
16. 
    
17.             let newData = "" //合并请求数据，根据实际业务情况整理
    
18.             for(let cId in callingStack){
    
19.                 newData += (cId + "," + callingStack[cId].data + ";");
    
20.             }
    
21. 
    
22.             // 发送请求，这里模拟数据，发送什么返回什么
    
23.             fetch("/spread/getData?data=" + newData)
    
24.                   .then(function(response) {
    
25.                     return response.text();
    
26.                   })
    
27.                   .then(function(text) {
    
28.                     let resData = newData.split(";");
    
29.                     let spread = designer.getWorkbook();
    
30.                     spread.suspendPaint(); //暂定页面绘制
    
31. 
    
32.                     //解析返回的数据
    
33.                     for(let resId in resData){
    
34.                         if(resData[resId]){
    
35.                             let ress = resData[resId].split(",");
    
36.                             // 根据Id，获取函数的context，调用callback回调
    
37.                             callingStack[ress[0]].callback.call(null, callingStack[ress[0]].context, ress[1])
    
38.                         }
    
39.                     }
    
40.                     spread.resumePaint(); //重启统一绘制
    
41.                 timingId = 0;
    
42.             });
    
43.         }, 1000)
    
44.     }
    
45. }

复制代码

更新异步函数实现方式，函数中调用stackCall堆栈函数，批量调用成功后执行callback回调中的setAsyncResult方法。

1. GetNumberFromServer.prototype.evaluate = function (context, arg1, arg2) {
   
2.     stackCall(arg1, context, function(context, text){
   
3.         context.setAsyncResult(text);
   
4.     })
   
5.     };

复制代码

通过以上实现，当页面有大量异步请求时会统一处理，一次刷新。
另外还可以使用doNotRecalculateAfterLoad导入选项，在首次加载时不计算，使用json中原始值，以及calcOnDemand开启按需计算。
这两个option可以根据您的实际需求设置。

1. json.calcOnDemand = true;
   
2. spread.fromJSON(json, { doNotRecalculateAfterLoad: true });

复制代码

请教一下，代码中的处理返回数据段，如附件图。从代码来看是在拆分请求数据，此处是不需要拿到api的返回数据来做处理吗？

收到问题，这边调研下给您回复。

athenadeveloper 发表于 2022-10-14 11:15
请教一下，代码中的处理返回数据段，如附件图。从代码来看是在拆分请求数据，此处是不需要拿到api的返回数 ...

想请教一下版主 如果异步函数的调用  这些代码是放在js文件里面的  那这个方法里面的 designer有办法传进去吗  用的技术栈是vue2+v16

文章中designer指的是designer（设计器）对象，您初始化deisgner获取对象后，就可以做后续的处理了。

Lynn.Dou 发表于 2023-4-17 18:13
文章中designer指的是designer（设计器）对象，您初始化deisgner获取对象后，就可以做后续的处理了。

再想请教下版主，如果定义了多个异步函数，sheet中也存在多个异步公式，触发计算时，这个函数应该如何改造，并且需要在所有异步公式计算完成后给用户一个计算完成的提示