我应该如何并行执行 2 个或更多 json 调用？

Posted 2023-03-07

【中文标题】我应该如何并行执行 2 个或更多 json 调用？

【英文标题】：How should I parallelize the execution of 2 or more json calls?

【发布时间】：2017-08-20 01:39:23

【问题描述】：

我正在尝试优化网页的加载时间，但遇到了难题。在做了一些 JSP 重构并通过减少网页实际需要的客户端库之后，我设法优化了加载时间。

但是，我注意到发起了 3 个 json 调用（见屏幕截图），我需要并行化它们的执行。如您所见，来自页面的三个 json 调用。前两个（在蓝色框中）表示加载页面内的左侧 div 和顶部 div（例如，加载一些主题/组和通知）。最后一次调用（在红色框中）加载墙贴（facebook 类型），这仅在上述两次调用完成后才产生。

我希望同时进行所有三个 json 调用以启动（或加载页面），即并行。这里有人可以建议我该怎么做吗？

谢谢:)

【问题讨论】：

你能提供执行这个调用的js代码吗？似乎在第二个请求“成功”处理程序中调用了第三个请求。 （或者 promise.then 如果你正在使用 Promise）

【参考方案1】：

您需要做的就是简单地将每个调用放在一起，如果您想等到它们都完成后再做其他事情，请存储 Promise。

例子：

$q.all([getThing1().promise, getThing2().promise(), getThing3().promise]).then(function() 
  // Do other stuff once all 3 have finished.
);

这是一个工作示例：

// https://developers.google.com/web/fundamentals/getting-started/primers/promises#promisifying_xmlhttprequest
function get(url) 
  return new Promise(function(resolve, reject) 
    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function() 
      if (req.status == 200) 
        resolve(req.response);
      
      else 
        reject(Error(req.statusText));
      
    ;
    req.onerror = function() 
      reject(Error("Network Error"));
    ;
    req.send();
  );


document.querySelector('button').addEventListener('click', function() 
  Promise.all([get('https://httpbin.org/get?a=1'), 
               get('https://httpbin.org/get?b=2'), 
               get('https://httpbin.org/get?c=3')]).then(values =>  
    console.log(values);
  );
);

<button>get</button>

在 Network 面板上你可以看到所有三个请求同时执行：

【讨论】：

您可以编辑我的答案而无需我批准编辑？！巫术。

是的，当您在 SO 上获得足够的声誉时。在此之前，您可以建议编辑并等待社区中多个用户的批准。如果您对编辑不满意，当然可以更改它，但想法是社区一起工作。见***.com/help/privileges/edit :)

很高兴，这有帮助。我只需要在最初的两个 promises.push() 调用之后添加第三个 json 调用。