JavaScript中实现函数等待AJAX异步完成执行的方案问询

你遇到的核心问题是**prepareEstimates和prepareCustomEstimates都是包含异步操作的函数，但你没有等待它们完成就继续执行后续代码**，导致两个AJAX调用并发触发。下面我会一步步帮你修复这个问题：

第一步：修复callAJAXFunction的异步逻辑 #

你的callAJAXFunction里用了await但没有标记为async，这会直接报错。另外，$.ajax本身返回一个jQuery Deferred对象，它可以兼容Promise，我们可以把它改成标准的async/await写法，同时完善错误处理：

async function callAJAXFunction(url, data) {
  try {
    // 用await等待AJAX完成，返回结果
    const result = await $.ajax({
      url: url,
      type: "POST",
      dataType: "json",
      data: data
    });
    return result;
  } catch (error) {
    console.log("error calling Api:", error);
    // 抛出错误，让上层函数能捕获处理
    throw error;
  }
}

第二步：让prepareEstimates和prepareCustomEstimates返回Promise #

这两个函数内部包含异步操作，我们需要把它们改成async函数（自动返回Promise），这样外部就能等待它们完成：

async function prepareEstimates() {
  if (runApi) {
    // 等待AJAX调用完成后再处理结果
    const result = await callAJAXFunction(path, dataForAPICalls);
    // 在这里处理返回结果
    console.log("基础估算结果:", result);
  }
  // 如果不需要调用API，函数会自动返回resolved的Promise
}

async function prepareCustomEstimates() {
  if (runApi) {
    const result = await callAJAXFunction(path, dataForAPICalls);
    // 处理自定义估算结果
    console.log("自定义估算结果:", result);
  }
}

第三步：在点击事件中等待异步函数完成 #

因为事件处理函数需要等待异步操作，所以要把它标记为async，然后用await依次调用两个函数：

$('#estimateBtn').on("click", async function () {
  if (validateBasicEstimationForm()) {
    // 等待prepareEstimates完全完成（包括AJAX调用和结果处理）
    await prepareEstimates();
    // 第一个完成后，再判断是否执行第二个
    if (validateCustomEstimationForm()) {
      await prepareCustomEstimates();
    }
  }
});

替代方案：用Promise链式调用（如果你不想用async/await） #

如果你更习惯传统的Promise写法，也可以用.then()链来实现顺序执行：

$('#estimateBtn').on("click", function () {
  if (validateBasicEstimationForm()) {
    prepareEstimates()
      .then(() => {
        if (validateCustomEstimationForm()) {
          return prepareCustomEstimates();
        }
      })
      .catch(error => {
        // 捕获整个流程中的错误
        console.log("流程执行出错:", error);
      });
  }
});

// 改写prepareEstimates为返回Promise的函数
function prepareEstimates() {
  if (!runApi) {
    // 不需要调用API时，直接返回一个已完成的Promise
    return Promise.resolve();
  }
  return callAJAXFunction(path, dataForAPICalls)
    .then(result => {
      // 处理结果
      console.log("基础估算结果:", result);
    })
    .catch(error => {
      console.log("基础估算出错:", error);
      throw error; // 继续向上抛出错误
    });
}

// prepareCustomEstimates同理
function prepareCustomEstimates() {
  if (!runApi) return Promise.resolve();
  return callAJAXFunction(path, dataForAPICalls)
    .then(result => {
      console.log("自定义估算结果:", result);
    })
    .catch(error => {
      console.log("自定义估算出错:", error);
      throw error;
    });
}

关键要点总结 #

• 异步函数必须返回Promise：这样外部才能等待它完成，async函数会自动返回Promise，普通函数可以手动返回Promise.resolve()或Promise.reject()。
• 用await或.then()等待异步操作：这是保证顺序执行的核心，避免异步操作并发触发。
• 不要忽略错误处理：用try/catch（async/await）或.catch()（Promise链）捕获错误，避免静默失败。

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