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

Sequential Asynchronous calls are gross. Is there a more readable solution?

顺序异步调用很严重。有更可读的解决方案吗？

The problem is this is hard to follow:

问题是这很难遵循：

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

where the anonymous functions are callbacks that are called on server response.

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

I'm using a third party API to make the AJAX calls, so I need a generic solution.

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

4 个解决方案

#1

functional programming to the rescue! jsdeferred lets you write your example like so:

功能性编程救援！ jsdeferred允许你像这样编写你的例子：

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

each of the "sequential" ajaxOne/Two/Three functions receives the returned result of its predecessor as parameter. If you need to pass in additional parameters, you can expose them in a global object before you invoke your ajax chain.

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

#2

If you have only one nested function, it's Ok to leave it as is, but if you have several nested calls, you should consider writing these callbacks in a separate method, and calling it from the nested function...

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

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

#3

First I have to admit, I'm relatively new to JavaScript, but I recently encountered the same problem while using the jQuery ajax function. I had to upload a couple of documents via POST to a server in a certain order. Nesting all the call backs would have produced completely messed up code. I thought about a solution after reading the answers and came up with a solution that worked fine me. It uses only one function with a switch clause to differentiate the different callback invocations:

首先我不得不承认，我对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;
 }
});

If this is not a good idea, please let me know. As I said, I'm not a JavaScript expert but I it worked pretty well for me.

如果这不是一个好主意，请告诉我。正如我所说，我不是JavaScript专家，但我对我的工作非常好。

Best, René

最好的，René

Edit:

编辑：

After a while I found out that Promises are a much better approach to solve this problem.

过了一会儿，我发现Promise是解决这个问题的更好方法。

#4

If you don't need the closure scope in your callbacks, which you probably won't, you can just put the callbacks into separate functions and call them by their name. like:

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

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

#1