javascript - 确保所有异步调用都在 jQuery 中完成

Question

我有一个 webapp，它使用 jQuery:s $.get 和 $.post 方法进行一堆异步 API 调用。在激活按钮（显示：无/阻止）之前，我需要确保所有这些都已成功完成（HTTP 状态代码 200）。

有没有办法确保在 jQuery 中没有等待开箱即用的未完成的异步调用？还是我需要自己跟踪这个？

我正在使用 jQuery v1.8.3。

Answer 1

您可以创建一个“Master Deferred”，只有在所有其他 Deferred（AJAX 请求）都成功完成后才会解析；

jQuery.when(jQuery.get('/foo'), jQuery.post('/bar'), jQuery.get('/baz')).done(function () {
    $('button').show();
});

语法是将每个Deferred作为参数传递给jQuery.when()，它返回 a Deferred，当一个失败或所有这些都完成时解析。

如果您事先不知道您有多少个 AJAX 请求，已经将它们放在一个数组中，或者只是不想使用上述内容，您可以Function.apply像这样使用；

var ajaxRequests = [jQuery.get('/foo'), jQuery.post('/bar'), jQuery.get('/baz')];

jQuery.when.apply(jQuery, ajaxRequests).done(function () {
    $('button').show();
});

有关详细信息，请参阅http://api.jquery.com/jQuery.when或http://www.mattlunn.me.uk/blog/2014/01/tracking-joining-parallel-ajax-requests-with- jquery/ ^{（我的博客）}

Answer 2

从这篇文章中，您应该能够使用相同的代码（不过，您不需要该abortAll功能，因此已将其删除，并添加了对活动请求的检查）：

$.xhrPool = [];
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.xhrPool.indexOf(jqXHR);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
        if ($.xhrPool.length > 0) {
            //There are still active requests - keep the button hidden
        } else {
            //There's no more active requests - show the button
        }
    }
});

这将适用于通过 jQuery 请求的所有 ajax 请求，无论是with$.get和.$.post$.ajax