如何链式调用两个含Ajax请求的Promise并合并结果后执行方法？

这事儿好办！你可以利用Promise.all()来并行处理这两个Ajax请求，等两个请求都成功返回后，再合并结果传给drawGraph。我给你一步步拆解实现：

1. 完善两个请求的Promise封装 #

首先把第二个请求loadSiteTraffic也封装成返回Promise的函数，同时建议给原来的loadData加上失败处理，让代码更健壮：

loadData: function() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      dataType: 'json',
      url: url1
    }).done(function(response) {
      resolve(response);
    }).fail(function(error) {
      // 处理请求失败的情况
      reject(error);
    });
  });
},
loadSiteTraffic: function() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      dataType: 'json',
      url: url2 // 替换成你的第二个请求地址
    }).done(function(response) {
      resolve(response);
    }).fail(function(error) {
      reject(error);
    });
  });
},
drawGraph: function(stats) { 
  // 这里可以接收合并后的stats，比如stats.mainData和stats.trafficData
  // do stuff with the combined stats
},

2. 用Promise.all并行发起请求并合并结果 #

Promise.all()会接收一个Promise数组，等所有Promise都成功resolve后，返回一个包含各请求结果的数组。你可以在then回调里合并结果，再传给drawGraph：

// 发起两个并行请求
Promise.all([this.loadData(), this.loadSiteTraffic()])
  .then(function(results) {
    // results[0]是loadData的返回结果，results[1]是loadSiteTraffic的返回结果
    // 根据你的需求合并结果，比如合并成一个对象
    const combinedStats = {
      mainData: results[0],
      trafficData: results[1]
    };
    // 如果两个结果都是数组，也可以合并成一个数组：
    // const combinedStats = [...results[0], ...results[1]];
    
    // 调用drawGraph处理合并后的数据
    this.drawGraph(combinedStats);
  }.bind(this)) // 绑定this，确保drawGraph能正确访问到当前上下文
  .catch(function(error) {
    // 处理任意一个请求失败的情况
    console.error('请求出错:', error);
  });

如果你的项目环境支持ES6箭头函数，还可以用箭头函数简化bind(this)的操作：

Promise.all([this.loadData(), this.loadSiteTraffic()])
  .then((results) => {
    const combinedStats = {
      mainData: results[0],
      trafficData: results[1]
    };
    this.drawGraph(combinedStats);
  })
  .catch((error) => {
    console.error('请求失败:', error);
  });

补充说明 #

• Promise.all()是并行执行两个请求，比串行请求效率更高；
• 只要其中一个请求失败，catch就会立即捕获到错误，不会等待另一个请求完成；
• 合并结果的方式完全取决于你的业务需求，你可以按需把两个结果整合成对象、数组或者其他结构。

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