尝试使用延迟对象和 $.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 太早了。 在each 循环之外进行操作，在您启动所有 ajax 调用并在数组中获得它们的 promise 之后：

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 的第二个参数，或者在最新版本的 jQuery 中使用 catch）：

$.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
    }
);