如何在AJAX调用中正确返回响应？解决函数返回undefined问题

嘿，这个问题我之前也踩过坑，核心原因就是AJAX是异步操作，你原来的代码里函数在异步请求完成前就已经返回了，自然拿不到预期的数据。

问题分析 #

你写的getDiscountAmount里，Promise.all().then()是异步执行的——也就是说，当函数走到return data这一行时，then里面的代码还没开始运行，data根本没被赋值，所以直接返回了undefined。异步操作不会阻塞代码执行，函数会先走完同步逻辑，等AJAX请求全部完成后才会进入then回调。

解决方案：让函数返回Promise #

要解决这个问题，我们需要让getDiscountAmount直接返回Promise.all的结果（它本身就是一个Promise），然后在调用的地方通过then或者async/await来获取异步返回的数据。

修改后的getDiscountAmount代码：

function getDiscountAmount() {
  // 先初始化promises数组，避免未定义错误
  const promises = [];
  for (var i = 0; i < invoice_ids.length; i++) {
    promises.push(getInvoiceAmountData(amount_tds, invoice_ids[i]));
  }
  // 直接返回Promise链，让调用方可以通过then/await获取结果
  return Promise.all(promises);
}

function getInvoiceAmountData(amount_tds, invoice_id) {
  return $.ajax({
    url: "payments/getInvoiceAmount",
    method: "post",
    dataType: 'json',
    data: {"amount_tds": amount_tds, "invoice_id":invoice_id}
  });
}

调用方式 #

现在有两种直观的方式可以获取返回的数据：

方式1：使用.then()回调

function getResponse() {
  getDiscountAmount()
    .then(responses => {
      console.log(responses); // 这里就能拿到所有AJAX请求的响应数组了
    })
    .catch(error => {
      // 别忘了处理请求失败的情况，比如网络错误、后端报错
      console.error('获取折扣金额失败:', error);
    });
}

方式2：使用async/await（更简洁）

如果你的运行环境支持ES2017+，可以用async/await让代码看起来像同步逻辑：

async function getResponse() {
  try {
    const responses = await getDiscountAmount();
    console.log(responses);
  } catch (error) {
    console.error('获取折扣金额失败:', error);
  }
}

额外注意点 #

• 必须初始化promises数组，你原来的代码里没写const promises = []，会导致变量未定义的错误。
• 异步操作永远无法同步返回结果，必须通过Promise的回调机制来处理。
• 不要忽略错误处理，否则某个AJAX请求失败时，整个Promise.all会直接进入catch，如果没捕获的话会导致未处理的Promise异常。

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