jQuery中依赖ajax调用的最佳方法

Question

我有需要进行 5 次 ajax 调用的情况。第二次ajax调用将在第一次调用返回响应后进行，第三次调用在第二次调用完成时进行，第四次和第五次调用也是如此。

我知道有 2 种方法，我可以在前一次调用成功时嵌套 ajax 调用，或者在第一次调用之前将异步设为 false，在最后一次调用后设为 true。任何人都可以建议哪个是以及为什么它是完成我的任务的更好方法，或者有更好的方法来做到这一点。

//First Way
$.ajax({
...
success:function(){
    $.ajax({
    ...
        success:function(){
            $.ajax({
            ...
                success:function(){
                    $.ajax({
                    ...
                        success:function(){
                              do something      
                        }
                    });
                }
            });
        }
    });
}
});

//second way 
$.ajaxSetup({
    async: false
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajaxSetup({
    async: true
});

Answer 1

任何人都可以建议哪个是以及为什么它是完成我的任务的更好方法...

使用async: false 将使调用同步，这会在调用运行时锁定浏览器的用户界面。调用运行时最好让 UI 保持响应。

所以最好保持异步调用；有几种方法可以做到这一点：

正如您所演示的，正在使用 success 处理程序：

$.ajax({
    /*...*/,
    success: function() {
        $.ajax({
            /*...*/,
            success: function() {
                $.ajax({
                    /*...*/,
                    success: function() {
                        $.ajax({
                            /*...*/,
                            success: function() {
                                $.ajax({
                                    /*...*/
                                });
                            }
                        });
                    }
                });
            }
        });
    }
});

（我假设您已经注册了一个全局 ajax 错误处理程序，或者您在上面的/*...*/ 中有一个。）

这里使用了一个承诺链，这非常相似：

$.ajax({/*...*/})
    .done(function() {
        $.ajax({/*...*/})
            .done(function() {
                $.ajax({/*...*/})
                    .done(function() {
                        $.ajax({/*...*/})
                            .done(function() {
                                $.ajax({/*...*/});
                            });
                    });
            });
    });

或者你可以使用函数循环，像这样：

(function() {
    var calls = [
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)},
        function() { $.ajax({/*...*/, success: next)}
    ];
    var index = 0;
    next();

    function next() {
        if (index < calls.length) {
            // Do the next, increment the call index
            calls[index++]();
        }
    }
})();