React中如何将异步函数的返回值存储到全局变量

问题核心 #

Auth.currentSession() 是异步接口，返回值为Promise对象，你之前定义的fetch变量存储的是这个Promise实例，并非你需要的邮箱字符串，直接传入请求体无法被后端正常识别。

最优实现方案 #

你的addData本身就是异步函数，直接在函数内部等待会话获取完成后取邮箱即可，不需要提前定义变量存储，能完全避免异步时序导致的空值问题：

async function addData() {
  try {
    // 等待会话获取完成，直接取邮箱值
    const session = await Auth.currentSession();
    const userEmail = session.getIdToken().payload.email;
    const data = {
      body: {
        account_id: formState.account_id,
        builder: userEmail
      }
    };

    console.log(data);
    const apiData = await API.post("testapi", "/test", data);
    console.log({ apiData });
    alert("请求已提交");
  } catch (err) {
    // 统一捕获会话获取或接口请求的异常
    console.error(err);
  }
}

独立变量存储方案 #

如果有多处业务逻辑需要用到用户邮箱，需要存储到独立变量复用，可以参考如下实现，注意必须等待Promise执行完成后才能访问变量，避免拿到空值：

// 全局存储用户邮箱的变量
let globalUserEmail = null;

// 页面初始化时提前获取邮箱存储
Auth.currentSession()
  .then(data => {
    globalUserEmail = data.getIdToken().payload.email;
    console.log(globalUserEmail);
  })
  .catch(err => console.log(err));

async function addData() {
  // 兜底逻辑：如果全局变量还没赋值，当场重新获取一次邮箱
  const finalEmail = globalUserEmail ?? await Auth.currentSession().then(data => data.getIdToken().payload.email);
  const data = {
    body: {
      account_id: formState.account_id,
      builder: finalEmail
    }
  };

  console.log(data);
  const apiData = await API.post("testapi", "/test", data);
  console.log({ apiData });
  alert("请求已提交");
}

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