如何在 JavaScript 中向具有多个异步调用的函数添加回调？答案

【问题标题】：How can I add a callback to a function with multiple async calls in JavaScript?如何在 JavaScript 中向具有多个异步调用的函数添加回调？
【发布时间】：2016-12-09 09:16:45
【问题描述】：

function jsoncall(){
    $.getJSON("http://localhost:3000/data", function (data) {...});
    $.getJSON("http://localhost:3000/data", function (data) {...});
}

jsoncall.callback(function(){
    //do stuff
});

类似于上面的伪代码。 JavaScript 中有没有像上面的getJSON 这样考虑异步调用的方法？

【问题讨论】：

function (data) {...} 不是回调吗？ :)
在功能上，jsoncall 就像$.getJSON - 你可以简单地使用jsoncall = $.getJSON，因为它们在功能上是相同的。如果您需要等待直到它完成，那么我建议您查看$.Deferred 或 ES6 Promises。
function jsoncall(){ return $.getJSON(...) } 然后jsoncall().then(callback) 但是jQuery的延迟实现是imo。介于不好和糟糕之间的东西，具体取决于您使用的版本。我建议你看看“真正的”承诺。

标签： javascript asynchronous callback asynccallback

【解决方案1】：

如果你问我认为你是什么，那么你需要实现callbackin函数。

function jsonCall(callback) {
    $.getJSON('http://localhost:3000/data', function(data) {
        ....
        callback(data);
    });
}

jsonCall(function(data) {
    ...
});

【讨论】：

不是在寻找 getJSON 的回调，而是寻找整个函数，因为它会有多个 getJSON，抱歉。

【解决方案2】：

使用延迟：[https://api.jquery.com/jquery.deferred/][1]

function jsoncall(){
     var $def = $.Deferred();
    $.getJSON("http://localhost:3000/data", function (data) {

      $def.resolve(data);

    });

    return $def;
}
jsoncall.done(function(data){
    //do stuff
});

【讨论】：

不是在寻找 getJSON 的回调，延迟部分是我想要的，设置为答案，谢谢。

【解决方案3】：

Async Call Explained(here)

制作一个 utils.js 并将您的 ajax 函数放在那里，在需要的地方调用它。

//utils.js    
function doAjax(callbackFunc, method, url) {
      var xmlHttpReq = new XMLHttpRequest();
      xmlHttpReq.open(method, url);
      xmlHttpReq.onreadystatechange = function() {

          if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
            callbackFunc(xmlHttpReq.responseText,buttonArrayInit);
          }


      }
      xmlHttpReq.send(null);

    }



    function loadMyJson(categoryValue){
      if(categoryValue==="veg")
      doAjax(print,"GET","http://localhost:3004/vegetables");
      else if(categoryValue==="fruits")
      doAjax(print,"GET","http://localhost:3004/fruits");
      else 
      console.log("Data not found");
    }

【讨论】：