javascript - 等待多个请求完成

Question

在页面加载时，我必须检索三个 JSON(对于 loadJSON() 请参阅PS)

$(document).ready(function() {
    loadJSON("JSON1.json",function(json){
        json1 = json:
        console.log("JSON1 loaded");
    });
    loadJSON("JSON2.json",function(json){
        json2 = json:
        console.log("JSON2 loaded");
    });
    loadJSON("JSON3.json",function(json){        
        json3 = json:
        console.log("JSON3 loaded");
    });

    //doing stuff after all three have loaded (PSEUDO:)
    waitTillFinished(doingStuff(json1, json2, json3));
});

然后我需要运行一个结合三个 JSON 的结果的函数(doingStuff 函数)，因此它必须等到所有三个 JSON 都完成。我想到了一个执行主动等待并触发回调的函数，例如做事。

我该怎么做？

我正在这里寻找某种信号量模式。这在 JS 中通常是如何完成的？

已经尝试过:

jQuery 构造:

$( document ).ready(function() {
  $.when(
    loadJSON("JSON1.json",function(json){
        json1 = json;
        console.log("JSON1 loaded");
    }),
    loadJSON("JSON2.json",function(json){
        json2 = json;
        console.log("JSON2 loaded");
    }),
    loadJSON("JSON3.json",function(json){        
        json3 = json;
        console.log("JSON3 loaded");
    })
  ).then(
    doingStuff(json1, json2, json3);
  );
});

这不会等待调用完成。这是完全可以理解的，因为 loadJSON 函数已经完成，只有回调还没有触发。

“状态信号量”的使用

var status1 = $.getJSON("JSON1.json"[..]); //shortend [..]
var status2 = $.getJSON("JSON2.json"[..]); //shortend [..]
var status3 = $.getJSON("JSON3.json"[..]); //shortend [..]

status1.complete(function(){
  status2.complete(function(){
    status3.complete(doingStuff(json1, json2, json3)
  }
}

这确实有效，但无法扩展。对于两个调用，它会考虑这个解决方案，三个调用已经有气味了。但当应用程序不断发展时，我预计会收到更多的电话。

PS:loadJSON() 函数是一个用于加载和记录请求内容的辅助函数:

function loadJSON(requestURL, callback){
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', requestURL, true); 
  xobj.onreadystatechange = function(){
      if (xobj.readyState == 4){
          if(xobj.status == 200){
              callback(JSON.parse(xobj.responseText));            
          } else {
              console.error(xobj.statusText);
          }
      }
  }
  xobj.onerror = function(e){
      console.error(xobj.statusText);
  }
  xobj.send();
}

Answer 1

使用 $.when 的代码可以工作 if loadJSON 返回一个 promise /延迟，就像 jQuery 的 getJSON做。所以:

$( document ).ready(function() {
  $.when(
    $.getJSON("JSON1.json"),
    $.getJSON("JSON2.json"),
    $.getJSON("JSON3.json")
  ).then(function(data1, data2, data3) { // Note naming, once they're parsed (which
    doingStuff(data1, data2, data3);     // getJSON does), they're not JSON anymore
  });
});

或者实际上，如果 doingStuff 按照我们将调用传递给 $.when 的顺序获取三个参数，我们就不需要包装函数:

$( document ).ready(function() {
  $.when(
    $.getJSON("JSON1.json"),
    $.getJSON("JSON2.json"),
    $.getJSON("JSON3.json")
  ).then(doingStuff);
});

请注意，我使用了 then 而不是 done。不同寻常的是，then 回调将使用每个结果的离散参数来调用(而普通的 then 仅使用一个参数调用其回调)。请注意，如果您使用 done 代替，您将获得三个离散参数，但它们是数组，其中每个数组都包含由以下结果产生的数据、textStatus 和 jqXHR 对象: $.getJSON 调用。

或者我们可以使用Promise.all(在任何主要的现代浏览器上):

$( document ).ready(function() {
  Promise.all([
    $.getJSON("JSON1.json"),
    $.getJSON("JSON2.json"),
    $.getJSON("JSON3.json")
  ]).then(function(results) {
    doingStuff(results[0], results[1], results[2]);
  });
});

请注意，我们将 Promise 作为数组传递，并返回一个数组。在 ES2015+ 中，我们可以在 then 回调的参数列表中使用解构:

$( document ).ready(function() {
  Promise.all([
    $.getJSON("JSON1.json"),
    $.getJSON("JSON2.json"),
    $.getJSON("JSON3.json")
  ]).then(([data1, data2, data3]) => {
    doingStuff(data1, data2, data3);
  });
});