同步两个 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();

});

Answer 2

另一种方法是使用 jQuery $.when()

$.when($.get('/api/one'), $.get('/api/two')).done(function(res1, res2) {

  callback_one(res1);

  callback_two(res2);

  callback_three();

});

Answer 3

您可以调用一个并在承诺中创建一个调用另一个的函数