多JSON源数据整合：如何结合$.when().then()与$.each处理批量请求

嘿，我完全懂你现在的困扰——当需要批量请求JSON数据时，直接用$.each循环搭配$.getJSON，确实会遇到异步回调外拿不到数据的问题，而改用$.when().then()的时候，又不知道怎么和批量请求结合起来。其实核心就是把所有请求的Deferred对象收集起来，再用$.when.apply()来批量处理，咱们一步步来拆解：

核心思路 #

$.when()本身可以接受多个异步请求（Deferred/jqXHR对象）作为参数，但它不直接支持传入数组。所以我们需要先把所有的$.getJSON请求存到一个数组里，再用apply方法把数组拆解成单个参数传给$.when，这样就能等待所有请求完成后统一处理数据了。

完整代码示例 #

// 先定义你需要请求的所有JSON数据源URL
const jsonSources = [
  'path/to/first.json',
  'path/to/second.json'
  // 这里可以继续添加更多URL
];

// 第一步：收集所有异步请求的Deferred对象
const requestPromises = [];
$.each(jsonSources, function(index, url) {
  // $.getJSON返回的是jqXHR对象（属于Deferred），直接存入数组
  const req = $.getJSON(url);
  requestPromises.push(req);
});

// 第二步：用$.when.apply()等待所有请求完成
$.when.apply($, requestPromises).then(function() {
  // arguments里包含了每个请求的返回结果，顺序和requestPromises一致
  // 每个结果的格式是 [JSON数据, 状态文本, jqXHR对象]，所以取第一个元素就是我们要的JSON
  const allJsonData = Array.from(arguments).map(response => response[0]);
  
  // 现在你可以在这儿自由处理所有数据了！
  console.log('第一个数据源的数据:', allJsonData[0]);
  console.log('第二个数据源的数据:', allJsonData[1]);
  
  // 接下来写你的业务逻辑，比如合并数据、渲染页面等
}).fail(function(error) {
  // 处理任何一个请求失败的情况
  console.error('有一个请求出错了:', error);
});

关键细节解释 #

1. 为什么用apply？
   $.when()的参数是逐个传入的（比如$.when(req1, req2)），而我们的请求是数组形式，apply可以把数组元素作为单个参数传递给函数，完美适配$.when的要求。

2. arguments怎么处理？
   then()回调里的arguments是一个类数组对象，每个元素对应一个请求的返回结果。每个结果是一个包含三个元素的数组，我们只需要第一个元素（也就是解析后的JSON数据），所以用Array.from(arguments).map(...)把它们提取出来。

3. 容错处理
   加上.fail()方法可以捕获任何一个请求失败的情况，避免因为某一个请求出错导致整个流程卡住。

这样改造后，你就不用再纠结全局数组访问不到的问题了——所有数据都会在所有请求完成后，统一出现在then()回调里，方便后续的业务处理。

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