如何在JavaScript中同步API響應？

Question

在JavaScript中，需要從兩個API調用中檢索數據，並使用它們來處理顯示的數據。

例如; 一個調用返回具有用戶標識的任務，另一個調用返回用戶標識和名稱的列表。 在我在屏幕上顯示之前，我想處理用戶ID，以便根據任務數據顯示用戶名。

（我能想到的最好的是每個響應的標志（完成時設置為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

如果您正在使用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);

注意我沒有測試過這個。

Answer 3

我認為旗幟可能是你最好的。 或者，如果要強制執行一系列請求，您可以執行同步AJAX調用（當然它是SJAX！）。 當然，這將阻止腳本的其余部分執行，直到第一個腳本完成，然后第二個腳本完成。

Answer 4

我覺得你已經差不多了。 也許使用一個具有三種狀態的小狀態機，noResponse，oneResponse和兩個響應（隱含），類似於以下內容：

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

我假設您需要的所有數據都在您的兩個調用對象中，您可以檢查它們並在processBothResponses（）中進行交叉檢查。