如何获取Promise.then()异步返回值 解决外部访问undefined问题

你拿到undefined本质是JS异步执行时序问题：fetch发起网络请求后，JS引擎不会阻塞等待接口返回，会直接往下执行后续同步代码，也就是你写的console.log(username)会在.then里的setUsername执行之前就运行，此时username还没被赋值，自然是undefined。

根据你的使用场景选对应写法即可，尤其注意你提到的React场景不要把return塞到.then里，会直接破坏渲染逻辑。

通用JS场景：所有依赖返回值的逻辑放到异步流程内 #

不要试图在异步流程外部读取异步返回的结果，所有用到用户名的逻辑，都要等接口返回后再执行：

// 写法1：沿用Promise.then
getUsername().then(value => {
  const username = value.username;
  console.log(username); // 此处可拿到正确值
  // 所有依赖username的业务逻辑全部写在这里
})

// 写法2：用async/await 平铺写法，注意await必须放在async函数内
const init = async () => {
  const userInfo = await getUsername();
  const username = userInfo.username;
  console.log(username); // 此处可拿到正确值
  // 后续依赖username的业务逻辑写在这里
}
init();

React场景：用组件状态存储返回值，触发视图自动更新 #

React里不要在异步回调里返回JSX，正确做法是用state承接接口数据，接口返回后自动触发重渲染：

import { useState, useEffect } from 'react';

function UserInfo() {
  // 用组件state存用户名，初始化空值
  const [username, setUsername] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  // 组件挂载时请求接口
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await getUsername();
        setUsername(res.username);
      } catch (err) {
        console.error(err.message);
      } finally {
        setIsLoading(false);
      }
    }
    fetchData();
  }, []);

  // 加载中显示占位，避免渲染空值
  if (isLoading) return <div>用户信息加载中...</div>;
  return <div>当前登录用户：{username}</div>;
}

• 不要用全局变量承接异步返回值，再在同步代码里读取，永远会因为时序问题拿到不符合预期的值
• 异步逻辑的核心原则：哪个逻辑依赖异步返回的结果，哪个逻辑就放到Promise resolve之后执行
• 不要在.then/await的回调里直接return组件JSX，会打断React正常的渲染执行流，直接导致应用崩溃

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