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

Question

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

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

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

谢谢:)

Answer 1

您需要做的只是一起进行每个调用，如果您想等到它们全部完成后再做其他事情，请存储 promises。

例子:

$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>

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