并行发起API调用时Y函数未异步执行的问题排查

咱们先拆解下你的代码为啥没达到预期效果，然后一步步修正：

核心问题点 #

1. 完全是串行执行，根本没并行 #

你的buttonClick函数里先写了await X()，这行代码会阻塞后续代码，直到X的API调用完全结束才会执行Y()。这就导致Y是在X完成后才启动，完全不是你想要的「同时触发」。

2. Y函数的递归逻辑错误 #

• 你现在递归调用的是this.onStatusChange()，而不是Y自身，这根本没实现Y的递归调用；
• 没有终止条件：不管X是否完成，Y会一直递归下去（如果response为true的话）；
• Y没有返回Promise，无法跟踪它的执行状态，也没法和X的执行做联动。

3. X函数的冗余包装 #

X函数里多套了一层Promise，因为Service.requestAPI本身已经返回Promise了，直接返回它就行，没必要再包一层。

修正后的完整代码 #

// 简化X函数：直接返回API请求的Promise
function X() {
  return Service.requestAPI(RequestMethod.GET, API_URL.validateProductStatus);
}

async function buttonClick() {
  // 定义终止标志：X完成后设为true，让Y停止递归
  let isXCompleted = false;

  // 先启动Y的递归循环（立即执行，和X并行）
  const recursiveYTask = (async function recursiveY() {
    while (!isXCompleted) {
      const response = await Service.requestAPI(RequestMethod.GET, API_URL.validateProductStatus);
      if (response) {
        // 这里可以执行你需要的状态变更逻辑，比如调用onStatusChange
        this.onStatusChange();
        // 等待1秒后再发起下一次调用
        await new Promise(resolve => setTimeout(resolve, 1000));
      }
    }
  }).bind(this); // 绑定this，确保onStatusChange的上下文正确

  // 同时启动X的API调用
  const XResponse = await X();
  // X完成后，设置终止标志，让Y停止递归
  isXCompleted = true;
  // 等待Y的递归任务完全结束
  await recursiveYTask();
}

关键修正说明 #

1. 真正的并行执行：先启动Y的递归任务，再立即发起X的调用，两者同时进行，不会互相阻塞。
2. 可控的递归终止：用isXCompleted标志位，X完成后立即通知Y停止循环，避免无限递归。
3. 更可靠的递归逻辑：用while循环代替setTimeout递归，代码更清晰，也更容易控制终止时机。
4. 修复this指向问题：用bind(this)确保递归函数里的this和buttonClick的上下文一致，避免onStatusChange调用出错。
5. 简化X函数：去掉冗余的Promise包装，直接返回API请求的结果，代码更简洁高效。

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