使用jQuery处理多Ajax请求：收集成功结果并统一展示

核心思路是将每个Ajax请求包装为始终resolve的Deferred对象，绕过$.when()只要有失败就触发fail的机制，确保所有请求完成后再统一处理结果，同时满足「所有结果同时展示」的要求。

步骤1：包装Ajax请求，统一返回resolve状态 #

把每个已定义的Ajax实例（a1到a12）包装成新的Deferred，无论原请求成功或失败，都以resolve返回，并携带请求状态、结果和对应位置标识：

// 包装函数：将jQuery Ajax请求转为始终resolve的Deferred
function wrapAjax(req, positionIndex) {
  return $.Deferred(function(dfd) {
    req.done(function(responseData) {
      dfd.resolve({
        position: positionIndex,
        isSuccess: true,
        data: responseData
      });
    }).fail(function(xhr) {
      dfd.resolve({
        position: positionIndex,
        isSuccess: false,
        statusCode: xhr.status
      });
    });
  }).promise();
}

步骤2：批量包装所有请求 #

将a1到a12传入包装函数，生成新的请求数组：

const wrappedRequests = [
  wrapAjax(a1, 1), wrapAjax(a2, 2), wrapAjax(a3, 3), wrapAjax(a4, 4),
  wrapAjax(a5, 5), wrapAjax(a6, 6), wrapAjax(a7, 7), wrapAjax(a8, 8),
  wrapAjax(a9, 9), wrapAjax(a10, 10), wrapAjax(a11, 11), wrapAjax(a12, 12)
];

步骤3：等待所有请求完成，统一处理结果 #

用$.when.apply()等待所有包装后的请求完成，在done回调里：

• 批量更新DOM，确保所有结果同时展示
• 筛选收集成功请求的结果

// 等待所有请求完成
$.when.apply(null, wrappedRequests).done(function(...allResults) {
  // 收集成功请求的结果
  const successfulResults = allResults.filter(item => item.isSuccess);
  
  // 统一更新对应位置的DOM
  allResults.forEach(item => {
    // 假设页面中对应位置的元素选择器为 .cell[data-position="${item.position}"]
    const targetElement = $(`.cell[data-position="${item.position}"]`);
    if (item.isSuccess) {
      targetElement.text(`请求成功：${item.data}`);
    } else {
      targetElement.text(`请求失败：状态码 ${item.statusCode}`);
    }
  });
  
  // 对成功结果做后续处理（如统计、二次逻辑）
  console.log("所有请求完成，成功结果列表：", successfulResults);
});

替代方案：使用原生Promise.allSettled #

如果项目允许混用原生Promise，也可以将jQuery Deferred转为原生Promise，用Promise.allSettled()实现相同效果：

// 将jQuery Ajax实例转为原生Promise
const nativePromiseList = [a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12].map((req, idx) => {
  return new Promise(resolve => {
    req.done(data => resolve({position: idx+1, isSuccess: true, data}))
       .fail(xhr => resolve({position: idx+1, isSuccess: false, statusCode: xhr.status}));
  });
});

// 等待所有请求完成
Promise.allSettled(nativePromiseList).then(results => {
  const processedResults = results.map(res => res.value);
  const successfulResults = processedResults.filter(item => item.isSuccess);
  
  // 统一更新DOM
  processedResults.forEach(item => {
    const targetElement = $(`.cell[data-position="${item.position}"]`);
    targetElement.text(item.isSuccess ? 
      `请求成功：${item.data}` : 
      `请求失败：状态码 ${item.statusCode}`
    );
  });
  
  console.log("成功结果：", successfulResults);
});

关键说明 #

• 为什么不用原生$.when()：$.when()的机制是只要有一个请求失败（reject），就立即触发fail回调，不会等待剩余请求完成，无法满足「等待所有请求结束再统一处理」的需求。
• 确保结果同时展示：所有DOM更新逻辑都放在所有请求完成后的回调里，避免单个请求完成就更新DOM导致的内容分批出现。

内容的提问来源于stack exchange，提问作者김동현