如何让函数等待异步API调用完成后再继续执行后续逻辑

你的代码没有对异步Promise调用做等待处理：postData是async声明的异步函数，调用后会返回Promise对象，但forwardTicketId、goNext两层调用都没有加await等待Promise执行完成，JS引擎发起fetch请求后会直接执行后续同步逻辑，也就是在API还没返回时就触发了navGoNext()导航。

按照异步调用的全链路等待原则做改造，同时补充边界防护：

• 给异步调用链上的所有函数都加async标记，调用异步方法时使用await阻塞执行流，确保API返回后再走后续导航逻辑
• 增加导航状态锁，避免API请求过程中用户重复点击按钮触发多次请求、提前跳转
• 补充异常捕获逻辑，API请求失败时给用户提示，避免页面卡死或静默失败
• 补全fetch的HTTP状态校验，原生fetch只有网络报错时才会标记为失败，4xx、5xx类服务端错误不会自动抛异常

修正后的完整代码如下：

async postData(url = "", data = {}) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  });
  // 补充HTTP错误校验
  if (!response.ok) {
    throw new Error(`请求异常，状态码：${response.status}`);
  }
  // 可根据实际接口需求返回对应格式的结果
  return response;
},

async forwardTicketId(ticketId) {
  const origin = new URL(window.location.href).origin;
  const addr = `${origin}/current_ticket_id`;
  // 等待接口请求完成
  await this.postData(addr, {
    data: ticketId,
  });
},

async goNext() {
  // 状态锁：请求过程中重复点击直接拦截
  if (this.isNavigating) return;

  try {
    if (this.isRequiredStage) {
      this.isNavigating = true;
      // 等待接口返回后再执行后续导航
      await this.forwardTicketId(this.ticketId);
    }
    this.navGoNext();
  } catch (err) {
    console.error('票据ID提交失败:', err);
    // 这里替换成你项目里的全局提示方法即可
    alert('操作失败，请稍后重试');
  } finally {
    // 无论请求成功/失败都重置导航状态
    this.isNavigating = false;
  }
},

你可以配合isNavigating状态给导航按钮增加禁用态，请求过程中把按钮置灰不可点击，进一步降低用户误操作的概率，模板层不需要修改原有事件绑定逻辑。

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