Javascript 使用AJAX时如何避免嵌套函数？

顺序异步调用非常严重。有更具可读性的解决方案吗

问题是这很难理解：

ajaxOne(function() {
  // do something
  ajaxTwo(function() {
    // do something
    ajaxThree()
  });
});

其中，匿名函数是在服务器响应时调用的回调

---

我使用第三方API来做Ajax调用，所以我需要一个通用的解决方案。

如果你只有一个嵌套函数，那么就可以保留它，但是如果你有几个嵌套调用，你应该考虑用一个单独的方法写这些回调，并从嵌套函数调用……/p>

ajaxOne(function(result) { handleAjaxOneCallback(result, someExtraNeededArg); } );

function handleAjaxOneCallback(result, someExtraNeededParam) {
  // do something

  ajaxTwo(function(result) { handleAjaxTwoCallback(result, myFoo, myBar); });
}

function handleAjaxTwoCallback(result, foo, bar) {
  // do something

  ajaxThree(/* ... */);
}

---

如果回调中不需要闭包作用域（可能不需要），可以将回调放在单独的函数中，并按其名称调用它们。比如：

var ajaxOne = function() {
    doTheAjax(callbackOne);
}
var callbackOne = function() {
    //funny things ...
    doTheAjax(callbackTwo);
}
var callbackTwo = function() {
    //even more funny things ...
}

---

函数式编程来营救！您可以这样编写示例：

next(ajaxOne).next(ajaxTwo).next(ajaxThree).error(function(e){alert('An error happened:' + e)})

---

“顺序”ajaxOne/Two/Three函数中的每一个都将其前一个函数的返回结果作为参数接收。如果需要传入其他参数，可以在调用ajax链之前在全局对象中公开这些参数。

首先我必须承认，我对JavaScript比较陌生，但我最近在使用jQuery ajax函数时遇到了同样的问题。我不得不以一定的顺序通过POST将一些文档上传到服务器上。嵌套所有回调将产生完全混乱的代码。在阅读了答案后，我想到了一个解决方案，并想出了一个对我很有效的解决方案。它只使用一个带有switch子句的函数来区分不同的回调调用：

var callback = function(sCallIdentifier, callbackParameters){
  switch(sCallIdentifier){
     case "ajaxOne":
        doYourStuff(callbackParameters); //do your stuff for ajaxOne
        ajaxTwo(function(newCallbackParameters){
           /*define a anonymous function as actual method-callback and pass the call-identifier, together with all parameters, to your defined callback function*/
           callback("ajaxTwo", newCallbackParameters);
        });
       break;
     case "ajaxTwo":
       doYourStuff(callbackParameters);
       ajaxThree(function(newCallbackParameters){
          callback("ajaxThree", newCallbackParameters);
       });
       break;
     case "ajaxThree":
       doYourStuff();
       break;
 }
});

如果这不是一个好主意，请让我知道。正如我所说，我不是JavaScript专家，但我认为它对我来说非常有效

最好的， 勒内

编辑：

---

过了一段时间，我发现这是一个更好的方法来解决这个问题

尽管这种方法需要付出更多的努力，但它确实非常好而且干净：）但这并不是真正的“函数式编程”问题。这看起来很酷，但我无法理解延迟类在内部是如何工作的。看看JSDEREFERED的源代码（）告诉您下一个函数只是等待第一个ajax调用到达（使用setTimeout），然后发送下一个调用。你可以使用这个库来防止上面提到的问题。我的问题可能是形式错误。这实际上是我使用的方法，因为在我的示例中，线太大了。然而，逻辑很难遵循，因为调用仍然必须跟踪。