TypeScript中异步变量赋值完成后如何触发函数并保留返回值？

你的问题核心是异步操作的返回值捕获时机——handler.get(endpoint)本身返回的是Promise，直接链式调用.then()后，变量data接收的是.then()返回的新Promise，而非接口的实际响应结果。要同时拿到响应值并触发setMyState，可以用下面两种方式：

方法1：在.then()回调内处理赋值与状态更新 #

直接在then的回调函数里先接收响应值，再执行状态更新逻辑：

handler.get(endpoint).then(res => {
  const data = res; // 这里拿到接口返回的实际数据
  setMyState("finished getting endpoint");
  // 后续可以直接在这个作用域里使用data做其他处理
});

如果需要在外部使用data，因为异步特性，只能通过后续的异步逻辑（比如嵌套的.then()）访问。

方法2：用async/await简化异步逻辑 #

这种写法更直观，适合处理复杂的异步流程：

// 封装成异步函数
const fetchAndUpdate = async () => {
  const data = await handler.get(endpoint); // 等待接口请求完成，拿到实际返回值
  setMyState("finished getting endpoint"); // 请求完成后触发状态更新
  // 这里可以直接使用data进行后续操作
};

// 调用函数执行逻辑
fetchAndUpdate();

如果是在React函数组件中，建议把这个逻辑放到useEffect钩子中，避免组件渲染时重复执行：

import { useEffect } from 'react';

// 组件内部
useEffect(() => {
  const fetchAndUpdate = async () => {
    const data = await handler.get(endpoint);
    setMyState("finished getting endpoint");
    // 处理拿到的data
  };

  fetchAndUpdate();
}, [endpoint]); // 根据实际需求添加依赖项，避免不必要的重复请求

补充说明 #

异步操作的结果无法同步赋值给普通变量，因为handler.get(endpoint)的执行是非阻塞的，代码会先执行后续逻辑，等请求完成后才会进入.then()或await之后的代码。所以必须在异步回调或async/await的同步化逻辑中，才能拿到真实的响应值。

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