React中Axios.request使用async/await不等待问题求助

核心问题是requestFetchData函数没有返回Axios请求的Promise，导致await无法等待请求完成，直接拿到了undefined。

修复步骤： #

1. 修改requestFetchData函数 #

你需要让这个函数返回Axios请求的结果，有两种写法：

写法一：用async/await简化代码（推荐）

serverMgr.requestFetchData = async (service, args) => {
  let data = args
    ? JSON.stringify({
        "service": service,
        ...args 
      })
    : JSON.stringify({
        "service": service
      });

  let config = {
    method: 'post',
    maxBodyLength: Infinity,
    url: my_php_script_url,
    headers: { 
      'Content-Type': 'application/json'
    },
    data : data
  };

  try {
    // 用await等待Axios请求完成
    const response = await axios.request(config);
    return response.data;
  } catch (error) {
    console.log("ERROR requestFetchData: " + error);
    // 抛出错误让上层捕获，避免静默失败
    throw error;
  }
}

写法二：保留.then链式调用，但必须返回Promise

serverMgr.requestFetchData = async (service, args) => {
  // 前面的data和config代码不变

  // 关键：返回这个Promise链，否则函数默认返回undefined
  return axios.request(config)
    .then((response) => {
      return response.data;
    })
    .catch((error) => {
      console.log("ERROR requestFetchData: " + error);
      throw error;
    });
}

2. 优化App.js的错误处理（可选但建议） #

在useEffect里加上错误捕获，避免数据异常时崩溃：

useEffect(() => {
  initSingleton()
    .then(async () => {
      try {
        let appointmentsResults = await getServerMgr().getFullData();
        // 先判断数据是否存在，再处理
        if (appointmentsResults) {
          let appointmentsListClean = removeEmptyAppointments(appointmentsResults);
          // 这里可以把处理后的数据存入state，比如setAppointments(appointmentsListClean)
        }
      } catch (err) {
        console.error('获取全量数据失败:', err);
      }
    })
    .catch(err => {
      console.error('初始化单例失败:', err);
    });
}, []);

为什么之前的代码不生效？ #

你之前的requestFetchData虽然标记了async，但内部调用axios.request()后没有返回这个Promise，所以函数执行完会默认返回一个resolved状态的Promise，值是undefined。getFullData里的await拿到undefined后，就直接执行后续逻辑了，而Axios请求还在后台进行，这就导致你看到的“没有等待请求完成”的现象。

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