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

Question

我有一种情况需要进行5次ajax调用.第一次呼叫返回响应后将进行第二次ajax呼叫,第二次呼叫完成时进行第三次呼叫,同样进行第四次和第五次呼叫.

我知道有两种方法,我可以在前一次调用成功时嵌套ajax调用,或者在第一次调用之前使async为false,并在最后一次调用后使其成为真.任何人都可以建议这是什么以及为什么这是完成我的任务的更好方法,或者有更好的方法来做到这一点.

//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.在呼叫运行时,最好让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++]();
        }
    }
})();