javascript - 同步两个 HTTP 请求

Question

我试图通过向两个 API 端点发出 HTTP 请求来呈现页面上的一些元素。当两个调用都返回时，我想调用第三个函数。

出于性能原因，我不想链接两个 API 端点调用。

这是我的最小示例:

$(document).ready(function () {
    $.get({
        url: `/api/one`,
        success: function (response) {
            callback_one(response);
        }
    });
    $.get({
        url: `/api/two`,
        success: function (response) {
            callback_two(response);
        }
    });
    // want to call callback_three() after both of the above requests have completed.
});

如何正确执行此操作？我读过 Promises、async/await、Deferred 等，但我不确定 2019 年的最佳实践是什么。

Answer 1

你可以使用 Promise.all并执行以下操作。

const urlsAndCallbacks = [
   { 
    url: urlOne,
    callback: callbackOne
   },
   { 
    url: urlTwo,
    callback: callbackTwo
   },
];

Promise.all(urlsAndCallbacks.map(item =>
  $.get({
    url: item.url,
    success: function (response) {
      item.callback(response);
    }
  })
))
.then(data => {
  fetchThirdUrl();
});