jQuery/Ajax：两次独立API请求结果合并问题求助

嗨！欢迎第一次发帖呀😊，很高兴你之前从这里学到了不少东西，现在遇到问题别着急，咱们一起来搞定两次API请求结果合并的事儿！

你提到用了$.when、$.then还有嵌套函数都没成功，大概率是写法上没踩对关键点。其实$.when就是专门用来处理多个异步请求并行等待的工具，只要把请求的Deferred对象传进去，就能等所有请求完成后再统一处理结果。

我给你写个完整的示例，你可以对照着调整自己的代码：

第一步：定义两个独立的API请求函数 #

首先要确保每个请求都返回jQuery的Deferred对象（$.get、$.post这些方法本身就会返回这个对象，不用额外处理）：

// 模拟第一个API请求，替换成你的真实接口地址
function getFirstStats() {
  return $.get('/api/first-stats');
}

// 模拟第二个API请求，替换成你的真实接口地址
function getSecondStats() {
  return $.get('/api/second-stats');
}

第二步：用$.when等待所有请求完成并合并结果 #

// 传入两个请求的Deferred对象
$.when(getFirstStats(), getSecondStats())
  // 所有请求成功完成后触发done回调
  .done(function(firstResponse, secondResponse) {
    // 注意：jQuery的ajax请求返回的结果是[响应数据, 状态文本, jqXHR对象]，所以取第一个元素才是我们要的数据
    const firstData = firstResponse[0];
    const secondData = secondResponse[0];

    // 这里就是合并数据的环节，根据你的需求来处理：
    // 比如合并成一个对象
    const mergedStats = { ...firstData, ...secondData };
    // 或者如果是数组的话，就合并成一个数组：const mergedStats = [...firstData, ...secondData];

    // 最后把合并后的数据渲染到你的#stats容器里
    renderStats(mergedStats);
  })
  // 任何一个请求失败都会触发fail回调
  .fail(function(error) {
    console.error('请求出错啦：', error);
    $('#stats').html('<div class="col-12 text-center">数据加载失败，请稍后重试</div>');
  });

// 专门的渲染函数，把数据放到页面上
function renderStats(stats) {
  // 这里根据你的HTML结构调整渲染逻辑，比如：
  let html = '';
  for (const key in stats) {
    html += `<div class="col-4 col-12-sm">${key}: ${stats[key]}</div>`;
  }
  $('#stats').html(html);
}

为什么之前的写法可能失败？ #

• 如果你用嵌套函数，很可能是没有正确等待第二个请求完成就去合并，或者没有把第一个请求的数据传递到第二个请求的回调里；
• 如果用$.when没成功，大概率是没有正确获取请求返回的响应数据（忘记取数组的第一个元素），或者请求函数没有返回Deferred对象。

另外，如果你想用$.then链式处理，也可以这么写：

$.when(getFirstStats(), getSecondStats())
  .then(function(firstRes, secondRes) {
    return {
      first: firstRes[0],
      second: secondRes[0]
    };
  })
  .then(function(mergedData) {
    // 这里可以继续对合并后的数据做处理
    console.log('合并后的完整数据：', mergedData);
    renderStats(mergedData);
  })
  .fail(function(err) {
    console.error(err);
  });

你可以把自己的真实API地址替换进去，再调整合并和渲染的逻辑，应该就能解决问题啦！

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