如何在 JavaScript 中同步 API 响应？

Question

在 JavaScript 中，需要从两个 API 调用检索数据并使用这两个 API 来处理显示数据。

例如;一个调用返回带有用户 ID 的任务，另一个调用返回用户 ID 和名称的列表。在屏幕上显示之前，我想处理用户 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 调用（当然是 SJAX！）。当然，这将阻止脚本的其余部分执行，直到第一个脚本完成，然后第二个脚本完成。

Answer 3

我想你已经差不多了。也许使用具有三种状态的小型状态机，noResponse、oneResponse 和 BothResponses（隐含），大致如下：

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

我假设您需要的所有数据都在您的两个调用对象中，您可以检查它们并进行交叉检查在 processBothResponses() 中。

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);

注意我还没有测试过这个。