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

Question

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

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

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

谢谢:)

Answer 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 面板上你可以看到所有三个请求同时执行：