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

Question

顺序异步调用很糟糕。有没有更具可读性的解决方案？

问题是这很难理解：

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

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

我正在使用第三方 API 进行 AJAX 调用，因此我需要一个通用的解决方案。

Answer 1

如果您的回调中不需要闭包范围（您可能不需要），您可以将回调放入单独的函数中并按其名称调用它们。喜欢：

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

Answer 2

函数式编程来拯救！ jsdeferred 允许您像这样编写示例：

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

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

Answer 3

如果您只有一个嵌套函数，则可以保持原样，但如果您有多个嵌套调用，则应考虑在单独的方法中编写这些回调，并从嵌套函数中调用它...

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(/* ... */);
}

Answer 4

首先我必须承认，我对 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 专家，但它对我来说效果很好。

最好的，
René

编辑：

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