javascript - 所有 AJAX 异步请求完成事件？

Question

我有一个嵌套的 ajax 请求。第一个请求返回一个包含设备的列表，对于每个设备，我执行另一个 ajax 请求以获取更多数据。当嵌套请求成功时，我将数据附加到 <table> .

我需要某种事件来告诉我所有请求何时完成。我怎样才能做到这一点？请参阅下面的代码

$.ajax({
    type: 'GET',
    url: '@Url.Content("~/Service/listAllDevices")',
    dataType: 'json',
    success: function (data) {
        $.each(data.devices.device, function (index, value) {
            $.ajax({
                type: 'GET',
                url: '@Url.Content("~/Service/listLokationLabelsForDevice")' + '?uuid=' + value.uuid,
                dataType: 'json',
                success: function (data3) {
                    //Append to table
                }
            });
        });

Answer 1

您可以使用 promises 和 $.when() 来查看所有 ajax 调用何时完成，如下所示:

$.ajax({
    type: 'GET',
    url: '@Url.Content("~/Service/listAllDevices")',
    dataType: 'json',
    success: function (data) {
        var promises = [];
        $.each(data.devices.device, function (index, value) {
            promises.push($.ajax({
                type: 'GET',
                url: '@Url.Content("~/Service/listLokationLabelsForDevice")' + '?uuid=' +
                    value.uuid,
                dataType: 'json',
            }));
        });
        $.when.apply($, promises).done(function() {
            // all ajax results are done here
            // results from each ajax call are in order in
            // arguments[0], arguments[1], ...
            // you can now append them all to the table
        });
    }
});

基本思想是将每次 ajax 调用返回的 promise 收集到一个数组中。然后，您使用 jQuery 的 $.when 让 jQuery 告诉您何时所有这些 promise 都已解决，并从中收集所有返回的结果，并按照您请求的顺序保存所有数据。然后，当 $.when() 的 .done() 回调被调用时，所有数据都可用，您可以按顺序一次处理所有数据。

请注意，我还从内部 ajax 调用中删除了成功处理程序，因为您可以在 .done() 处理程序中处理所有结果。