如何让React/JavaScript函数doVerifyThingy支持then链式调用？

问题根源 #

当前doVerifyThingy函数会直接返回false，完全不等待后端请求的异步操作完成——因为dispatch(verifyThingyInBE(thingyId))返回的是Promise，但函数没有返回这个Promise，而是直接执行了return false，导致永远无法拿到后端返回的真实结果。

修改方案 #

要让doVerifyThingy成为thenable的，核心是让它返回整个异步Promise链，同时调整调用方的逻辑来等待异步结果：

1. 修改doVerifyThingy函数

const doVerifyThingy = (thingyId: string): Promise<boolean> => {
  // 返回Promise链，使函数本身具备thenable特性
  return dispatch(verifyThingyInBE(thingyId))
    .then((response) => {
      return response.payload as boolean;
    })
    .catch(() => {
      // 捕获请求错误，返回false（可根据业务需求调整错误处理逻辑）
      return false;
    });
};

2. 修改handleButtonClick调用逻辑

因为现在doVerifyThingy返回Promise，调用方需要用await或.then()来等待结果，这里用async/await更直观：

const handleButtonClick = async () => {
  const ok = await doVerifyThingy("254dghfgt6346");
  if (ok) {
    go_to_next_step();
  } else {
    alert("things are not ok!");
  }
};

关键说明 #

• doVerifyThingy的返回类型从boolean改为Promise<boolean>，明确它是异步函数。
• 不要留空catch块，必须处理Promise rejection，避免控制台报错或意外行为。
• handleButtonClick必须标记为async，否则await语法无法生效，依然会同步执行后续代码。

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