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

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