React前端Promise始终Pending：Node.js后端API调用问题排查

核心问题1：后端未正确返回HTTP响应 #

在Express路由处理函数中，你仅通过return data试图返回数据，但Express要求必须使用响应对象res的方法（如res.json()、res.send()）向客户端发送响应。直接return会导致HTTP请求始终处于挂起状态，前端的axios请求自然无法resolve。

修复后的后端代码：

async function getDataPromise() {
  const link = `externalAPI`;
  const response = await axios.get(link);
  console.log("Response = ", response.data[0]);
  return response.data[0];
}

router.get("/data", async (req, res) => {
  try {
    const data = await getDataPromise();
    console.log("data = ", data);
    // 使用res.json返回JSON格式数据给前端
    res.json(data);
  } catch (error) {
    // 捕获并返回错误，避免服务器崩溃
    res.status(500).json({ error: error.message });
  }
});

核心问题2：前端async函数未返回数据 #

你的getDataPromise函数注释掉了返回语句，即便后端修复后返回数据，这个async函数也会默认返回一个resolve为undefined的Promise。同时添加错误处理可以避免未捕获的Promise异常导致控制台报错。

修复后的前端代码：

import "./App.css";
import axios from "axios";

function App() {
  const getDataPromise = async () => {
    try {
      const response = await axios.get("http://localhost:8800/api/auth/data");
      console.log("ACTIVITY RESPONSE = ", response);
      // 返回后端返回的数据
      return response.data;
    } catch (error) {
      console.error("请求后端接口出错:", error);
      throw error; // 抛出错误让上层函数处理
    }
  };

  const getActivities = async () => {
    try {
      const promiseData = await getDataPromise();
      console.log("Promise data = ", promiseData);
    } catch (error) {
      console.error("获取数据失败:", error);
    }
  };

  return (
    <div className="App">
      <button onClick={getActivities}>Get All Data</button>
    </div>
  );
}

export default App;

总结 #

1. 后端必须通过res对象发送响应，否则前端请求会一直等待
2. 前端async函数需要明确返回数据，同时添加错误处理提升代码健壮性

内容的提问来源于stack exchange，提问作者program.exe