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将调用 synchronous ，这会在调用运行时锁定浏览器的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++]();
        }
    }
})();

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

1 个答案: