如何在jQuery的$.when().then()中结合条件执行不同数量AJAX请求

我明白你的需求啦——就是要在控制器初始化时，根据传入的参数决定发起3个还是4个AJAX请求，然后用$.when()统一等待所有请求完成对吧？其实核心思路就是动态构建AJAX请求的集合，再把这个集合传给$.when()就行，我给你整理个完整的实现方案：

实现步骤 #

• 先定义初始化方法，接收控制请求数量的参数（比如叫includeExtraRequest）
• 创建包含必选3个AJAX请求的数组
• 如果参数为true，就把第4个请求追加到数组里
• 最后用$.when()结合扩展运算符（或apply）处理请求数组，通过then()处理所有请求完成后的逻辑

完整代码示例 #

// 控制器初始化方法，接收控制参数
function initController(includeExtraRequest) {
  // 先定义必选的3个AJAX请求
  const ajaxRequests = [
    $.ajax({ url: "test.html" }).done(function() {
      $(this).addClass("done");
    }),
    $.ajax({ url: "test2.html" }).done(function() {
      $(this).addClass("done");
    }),
    $.ajax({ url: "test3.html" }).done(function() {
      $(this).addClass("done");
    })
  ];

  // 参数为true时，追加第4个请求
  if (includeExtraRequest) {
    ajaxRequests.push(
      $.ajax({ url: "test4.html" }).done(function() {
        $(this).addClass("done");
      })
    );
  }

  // 用$.when处理所有请求，...是ES6扩展运算符，把数组展开为单个参数
  $.when(...ajaxRequests)
    .then(function(testRes, test2Res, test3Res, test4Res) {
      // 所有请求成功完成后执行这里的逻辑
      // 注意：如果是3个请求，test4Res会是undefined，处理时要做判断
      console.log("所有请求完成");
      if (includeExtraRequest) {
        console.log("额外请求返回结果:", test4Res[0]);
      }
    })
    .fail(function(err) {
      // 任意一个请求失败时触发
      console.error("请求出错:", err);
    });
}

// 调用示例：传true发起4个请求，传false发起3个
initController(true);
// initController(false);

关键细节说明 #

• 动态请求集合：用数组管理请求比硬写参数灵活太多，后续要增减请求直接操作数组就行
• $.when参数传递：因为$.when()接收多个独立的Deferred对象，ES6用...扩展运算符展开数组；兼容ES5的话可以用$.when.apply($, ajaxRequests)
• done回调的作用：你原来给每个AJAX加的done()是单独处理单个请求成功的逻辑，和then()的全局完成逻辑不冲突，可以保留
• 结果顺序：then()的参数顺序和请求数组的顺序一致，参数为false时第4个参数会是undefined，处理时要注意判断

内容的提问来源于stack exchange，提问作者kostas.kapasakis