使用Axios实例与函数时，如何获取Promise中的数据？

问题根源 #

getPersons是异步函数，直接调用会返回处于pending状态的Promise——你必须用await等待它执行完成才能拿到结果。另外React的useEffect回调不能直接标记为async，得在内部套一个异步函数来执行异步逻辑。

解决方案 #

1. 修正Form.js中useEffect的调用逻辑 #

修改useEffect，在内部定义异步函数并通过await获取getPersons的返回值，再更新state：

useEffect(() => {
  const fetchPersonData = async () => {
    // 等待getPersons执行完成拿到数据
    const personData = await getPersons("Person/62f79a6981c410e64270613e");
    console.log(personData);
    // 更新各state变量
    setPersons(personData);
    setFname(personData.firstname);
    setLname(personData.lastname);
    setPhoto(personData.photo);
  };

  fetchPersonData();
  // 移除原有的getData调用，避免重复发起请求
}, []);

2. 简化PersonAPI.js中的getPersons函数 #

原函数混用了await和.then()，可以简化为更清晰的纯async/await写法：

const axios = require("axios");

export const API = axios.create({
  baseURL: "http://localhost:5197/api/"
});

export const getPersons = async (url) => {
  const res = await API.post(url);
  return res.data;
};

额外优化建议 #

• 统一请求逻辑：既然已经封装了getPersons，就没必要保留单独的getData函数，避免代码冗余。
• 添加错误处理：在异步函数中加入try/catch，处理请求失败的情况，防止页面崩溃：

const fetchPersonData = async () => {
  try {
    const personData = await getPersons("Person/62f79a6981c410e64270613e");
    setPersons(personData);
    setFname(personData.firstname);
    setLname(personData.lastname);
    setPhoto(personData.photo);
  } catch (error) {
    console.error("获取用户数据失败:", error);
    // 这里可以添加前端错误提示，比如弹出提示框
  }
};

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