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

Question

我正在尝试优化网页的加载时间，并遇到了一个难题。在进行了一些JSP重构并减少了网页实际需要的clientlib之后，我设法优化了加载时间。

然而，我注意到有3个json调用正在发生（见截图），我需要并行执行它们。如您所见，有三个来自页面的json调用。前两个（在蓝色框中）是说，加载页面中的左div和顶部div（例如，加载一些主题/组和通知）。最后一个电话（在红色框中）加载了墙上的帖子（脸谱类型），这只是在上述两个电话完成后才开始。

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

谢谢：）

Answer 1

您需要做的只是将每个电话召集在一起，如果您想等到完成所有其他事情之后再进行其他操作，请存储承诺。

示例：

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

这是一个有效的例子：

＆＃13;

＆＃13;

// 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);
  });
});

＆＃13;

<button>get</button>

＆＃13;

＆＃13;

＆＃13;

在“网络”面板上，您可以看到所有三个请求同时执行：