使用jQuery.when处理多个AJAX请求响应的技术咨询

嘿，你当前的思路其实已经找对方向了！先给你明确一下：当用$.when()批量处理多个AJAX请求时，then()回调里收到的每个responseRaw都是一个包含三个元素的类数组对象，对应单个$.ajax()请求成功时的完整回调参数：

• 第0位：服务器返回的JSON数据（就是你指定dataType: 'json'后自动解析好的结果）
• 第1位：响应状态文本（比如"success"）
• 第2位：jqXHR对象（包含请求的详细信息，比如HTTP状态码、请求头等）

所以你只需要在自定义处理逻辑里正确提取这些内容就行，下面是完整的可运行示例，还加了一些实用的优化：

// 生成AJAX请求数组
let requests = urls.map(function(url){ 
  return $.ajax({url: url, dataType: 'json'}); 
});

// 批量处理所有请求的结果
$.when(...requests)
  .then(function(...responses){ 
    // 遍历每个请求的响应结果
    let processed = responses.map(function(responseRaw, index){ 
      // 提取核心的JSON响应数据
      let responseData = responseRaw[0];
      // 如果你需要状态文本或请求详情，也可以顺手提取
      let statusText = responseRaw[1];
      let jqXHR = responseRaw[2];
      
      // 这里写你的自定义处理逻辑，举个例子：
      return {
        originalUrl: urls[index], // 把结果和原请求URL关联起来
        response: responseData,
        httpStatus: jqXHR.status // 获取请求的HTTP状态码
      };
    }); 

    // 后续业务操作，比如渲染处理后的数据
    console.log('处理完成的结果:', processed);
  })
  .fail(function(error){ 
    // 注意：$.when()只要有一个请求失败就会触发fail，这里捕获的是第一个失败的请求
    console.error('请求失败:', error.statusText, '状态码:', error.status);
  });

额外的实用技巧： #

1. 用ES6简化代码：如果你的项目环境支持ES6，箭头函数和解构赋值能让代码更简洁：

let requests = urls.map(url => $.ajax({url, dataType: 'json'}));

$.when(...requests)
  .then((...responses) => {
    let processed = responses.map((raw, idx) => {
      // 解构赋值直接提取需要的内容
      const [data, statusText, xhr] = raw;
      return {
        url: urls[idx],
        data,
        statusCode: xhr.status
      };
    });
    // 后续业务逻辑
  })
  .fail(err => console.error('请求出错:', err));

2. 处理部分失败的场景：$.when()的一个局限是只要有一个请求失败，就会立刻触发fail()，不会等待其他请求完成。如果需要即使部分请求失败，也能处理所有成功的请求，可以改用原生的Promise.allSettled()（需要jQuery 3.0及以上版本，因为从3.0开始jQuery的Deferred兼容原生Promise）：

// 把jQuery的Deferred对象转为原生Promise
let promiseRequests = urls.map(url => $.ajax({url, dataType: 'json'}).promise());

Promise.allSettled(promiseRequests)
  .then(results => {
    let processed = results.map((result, idx) => {
      if (result.status === 'fulfilled') {
        // 成功的请求，result.value就是[data, statusText, jqXHR]
        const [data] = result.value;
        return { url: urls[idx], success: true, data };
      } else {
        // 失败的请求，result.reason是错误信息
        return { url: urls[idx], success: false, error: result.reason.statusText };
      }
    });
    console.log('所有请求的处理结果:', processed);
  });

这样就能灵活应对每个请求的成功或失败状态了。

内容的提问来源于stack exchange，提问作者ov7a