Как синхронизировать ответы API в JavaScript?

Question

В JavaScript необходимо извлекать данные из двух вызовов API и использовать оба для обработки данных для отображения.

Например; один вызов возвращает задачи с идентификатором пользователя, другой возвращает список идентификаторов и имен пользователей. Прежде чем отобразить на экране, я хочу обработать идентификаторы пользователя, чтобы имя пользователя отображалось на фоне данных задачи.

(Лучшее, что я могу придумать, - это флаг для каждого ответа (установленный в true, когда выполнено), который проверяется другим вызовом (-ами). Так что только последний вызов будет продолжать создание страницы). *

Answer 1

Это немного заглушка, поскольку она не обрабатывает сбои, но обеспечивает базовый поток. Поскольку вы не знаете, кто вернет первым, запустите их обоих и сделайте что-нибудь, когда оба доставят данные.

И это предполагает, что у вас есть своего рода обратный вызов, который вы можете настроить для вызова, когда ваш API завершает запрос.

var apiData = {
  data1: null,
  data2: null
};

function callApis() {
  API.call1({ onComplete: function(result) {
    apiData.data1 = result;
    completeApiRequest();
  }});

  API.call2({ onComplete: function(result) {
    apiData.data2 = result;
    completeApiRequest();
  }});
}

function completeApiRequest() {
  if (apiData.data1 && apiData.data2) {
    doStuff();
  }
}

callApis();

Answer 2

Я думаю, ты уже там. Может быть, использовать крошечный конечный автомат с тремя состояниями, noResponse, oneResponse и bothResponses (подразумевается), что-то вроде:

var state = "noResponse";
callOne.onresponse = callTwo.onresponse = function() {
  switch(state) {
  case "noResponse":
    state = "oneResponse";
    break;
  case "oneResponse":
    processBothResponses();
    break;
  }
}

Я предполагаю, что все данные, которые вам нужны, находятся в ваших двух объектах вызова, и вы можете проверить их и выполнить перекрестную проверку в processBothResponses ().

Answer 3

Я думаю, что флаги, вероятно, ваши лучшие. Или вы можете выполнять синхронные вызовы AJAX (тогда это, конечно, SJAX!), Если вы хотите принудительно выполнить последовательность запросов. Конечно, это заблокирует выполнение оставшегося сценария до тех пор, пока не завершится первый, а затем второй.

Answer 4

Если вы используете вызов AJAX, я бы поместил (второй) вызов, который зависит от первого набора данных, в обработчик обратного вызова первого вызова:

Использование jQuery:

jQuery.ajax({
   url: url, /* first call */
   data: myData,
   cache: false,
   success: function(data) {
               /* ... processing code ... */
               jQuery.ajax({
                  url: url, /* second call */
                  data: someMoreData,
                  cache: false,
                  success: function(data) {
                           /* ... processing code ... */
                           }
               });
            }
});

Вот еще одно решение, которое делает это параллельно:

var requestOneCompleted = false;
var requestTwoCompleted = false;

jQuery.ajax({
   url: url, /* first call */
   data: myData,
   cache: false,
   success: function(data) {
               /* ... processing code ... */
               requestOneCompleted = true;
            }
});

jQuery.ajax({
   url: url, /* second call */
   data: someMoreData,
   cache: false,
   success: function(data) {
               /* ... processing code ... */
               requestTwoCompleted = true;
            }
});

setInterval(function() {
   if(requestOneCompleted && requestTwoCompleted) {
      doStuffWithData();
   }
}, 250);

Примечание Я не проверял это.