React调用外部服务始终返回Promise，无法获取实际数据求助

你遇到的核心问题是：Promise的链式调用（.then()）本身返回的依然是Promise，所以userProfile = retrieveUserProfile().then(...)这行代码里，userProfile必然是一个Promise对象，而非你期望的实际返回数据。

1. 用async/await语法（更贴近Java同步思维） #

这是Promise的语法糖，写法更直观，适合Java转前端的开发者。注意await必须包裹在async函数内部：

async function retrieveUserProfile() {
  // 用await等待异步请求完成，直接拿到结果
  const result = await API.fetchProfile({
    include: 'field1, field2',
  });
  return result.data;
}

// 调用时同样需要在async函数中使用await
async function handleProfile() {
  let userProfile = await retrieveUserProfile();
  // 这里userProfile就是实际数据，可以直接访问属性
  console.log(userProfile.field1);
}

handleProfile();

2. React组件中正确处理（顶层代码不能直接用await） #

如果是在React函数组件里，需要结合useState和useEffect管理异步数据的状态与加载逻辑：

import { useState, useEffect } from 'react';

function UserProfile() {
  const [userProfile, setUserProfile] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchProfile() {
      try {
        const result = await API.fetchProfile({
          include: 'field1, field2',
        });
        // 将请求结果存入状态
        setUserProfile(result.data);
      } catch (err) {
        console.error('获取用户信息失败:', err);
      } finally {
        setLoading(false);
      }
    }

    fetchProfile();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (!userProfile) return <div>数据加载失败</div>;

  return (
    <div>
      <p>字段1：{userProfile.field1}</p>
      <p>字段2：{userProfile.field2}</p>
    </div>
  );
}

export default UserProfile;

3. 若坚持用.then()，需在回调内处理数据 #

不能直接将.then()的结果赋值给变量使用，必须在回调函数内部操作数据：

retrieveUserProfile()
  .then((result) => {
    const userProfile = result.data;
    // 在这里处理数据，比如打印、更新状态
    console.log(userProfile.field2);
  })
  .catch((err) => {
    console.error('请求出错:', err);
  });

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