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（）中进行交叉检查。

如何在JavaScript中同步API响应？

4 个答案: