javascript - 尝试使用延迟对象和 $.when 进行多个 AJAX 调用

Question

因此，基于这个关于 Medium (https://medium.com/coding-design/writing-better-ajax-8ee4a7fb95f#.d7ymg99mp) 的教程，我正在尝试使用延迟数组、ajax 请求和 jQuery.when 方法来发出多个 ajax 请求并从每个请求中获取结果。

这是我正在做的代码

function updateAllGoingButtons(){
    var dataToPass = {};
    var deferreds = [];

    $('.btn-group').find('button').each(function(){
       console.log($(this).attr('id'));
       dataToPass.button = $(this).attr('id');
       var ajax = $.ajax({
          url: '/update-buttons',
          method: 'post',
          data: dataToPass,
          dataType:'json'
       });

       deferreds.push(ajax);

       $.when.apply($, deferreds).then(function(){

       });
    });
}

我对如何使用这个 $.when 函数以及在哪里可以访问返回给 ajax 调用的数据感到困惑。

我尝试插入一个简单的成功选项，但没有进入其回调函数。我该怎么做呢？

Answer 1

您只是太早调用了when。在开始所有 ajax 调用并在数组中获得它们的 promise 后，在 each 循环的外部执行此操作:

function updateAllGoingButtons(){
    var dataToPass = {};
    var deferreds = [];

    $('.btn-group').find('button').each(function(){
       console.log($(this).attr('id'));
       dataToPass.button = $(this).attr('id');
       var ajax = $.ajax({
          url: '/update-buttons',
          method: 'post',
          data: dataToPass,
          dataType:'json'
       });

       deferreds.push(ajax);

    });

    $.when.apply($, deferreds).then(function(){     // <=== Moved this
                                                    // <===
    });                                             // <===
}

这些 ajax 调用的结果将作为一系列离散参数提供给您的 then 函数。每个参数都是一个包含三个条目的数组，对应于通常传递给 success 函数的三个参数。由于您正在处理一个数组，您可能希望通过 arguments 伪数组访问它们。拥有一个拒绝处理程序(then 的第二个参数，或者将 catch 与最新版本的 jQuery 交替使用)也是一个好主意:

$.when.apply($, deferreds).then(
    function() {
        var n;
        for (n = 0; n < arguments.length; ++n) {
             console.log("Result " + n, arguments[n][0]);
        }
    },
    function() {
        // At least one request failed
    }
);