稍后使用 $.when 在 time 之前调用的 AJAX 请求列表答案

【问题标题】：List of AJAX requests to call later with $.when gets called before time稍后使用 $.when 在 time 之前调用的 AJAX 请求列表
【发布时间】：2016-08-16 06:15:41
【问题描述】：

我正在尝试构建一个 ajax 请求列表以输入 $.when() 方法，这样我就可以在所有请求完成后做一些事情（例如这个答案：https://stackoverflow.com/a/24050887/1952996）。

我想出了这个代码 (jsfiddle)：

function getUserData(username){
    return $.ajax({
     url:"/echo/json/",
        data:{json: $.toJSON({"username": username}),
                delay: 3},
        type:"POST",
        success:function(response)
        {
         console.log(response);
        }
    });}

  var userList = ["userA", "userB"];

  var userRequests = [];

  userList.forEach(function(u){
    userRequests.push(getUserData(u));
  })

当我运行它时，我看到数据被记录在控制台中。这是为什么？我认为我构建 ajax 请求的方式是返回 ajax 延迟对象。然后我尝试将这些对象存储在 userRequests 中。但是这些不应该被调用。我错过了什么？

【问题讨论】：

getUserData(u) 将调用ajax-call 并返回deferred-object 可以使用then/done 处理程序访问数据...
所以，我显然不知道发生了什么。但你的评论为我提供了一个重要的信息。 ajax 调用立即在getUserData(u) 上进行，成功函数的任何副作用都将在该请求完成后发生。

标签： javascript jquery ajax

【解决方案1】：

jQuery.ajax 的设计方式是在调用时进行 AJAX 调用，并返回 AJAX 延迟对象。

您的代码绝对类似于以下内容：

function getUserData(username){
  var result = $.ajax({
    url: "/echo/json/",
    data: { json: $.toJSON({"username": username}), delay: 3 },
    type: "POST",
    success: function(response)
    {
      console.log(response);
    }
  });

  return result;
}

它清楚地表明在函数调用的时刻发出了请求。
您现在可以使用$.when 等待所有请求完成。

附：对了，你可以替换你的forEach：

var userList = ["userA", "userB"];

var userRequests = [];

userList.forEach(function(u){
    userRequests.push(getUserData(u));
});

使用map的较短版本：

var userList = ["userA", "userB"];    
var userRequests = userList.map(getUserData);

【讨论】：