Синхронизировать два HTTP-запроса

Question

Я пытаюсь визуализировать некоторые элементы на странице, отправляя HTTP-запросы двум конечным точкам API. Когда оба звонка вернулись, я хочу позвонить в третью функцию.

По соображениям производительности я не хочу связывать два вызова конечной точки 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

Вы можете вызвать один и в обещании сделать функцию, вызывающую другой