React发送POST请求时如何获取Node.js后端返回的JSON响应数据

解决方案 #

首先纠正一个认知误区：axios的所有请求方法（包括POST、PUT、DELETE等）都会返回Promise，你可以和GET请求一样拿到响应数据，和请求方法没有关系。

你原来的代码有两个问题导致拿不到返回值：

1. 没有接收axios.post执行后的返回结果，该结果的data属性就是后端返回的JSON数据
2. 空的catch块没有处理错误场景的响应（虽然你现在后端校验失败返回的是201成功状态码，不会进入catch，但如果是500这类错误状态码会进入catch，也需要拿错误信息）

第一步：修改前端addUser函数 #

async function addUser(user) {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };
    try {
      // 接收axios返回的响应对象
      const response = await axios.post("/users/register", user, config);
      // response.data就是后端返回的完整JSON结构
      const resData = response.data;
      if (!resData.success) {
        // 校验失败，拿到错误数组，可以直接存到React的state中渲染到页面
        const errors = resData.errors;
        console.log("校验错误：", errors);
        // 示例：如果用useState存错误，这里写 setErrors(errors)
      } else {
        // 注册成功逻辑，比如跳转到登录页、提示注册成功
        console.log("注册成功", resData.data);
      }
    } catch (err) {
      // 处理500这类服务端错误，错误信息存储在err.response.data中
      if (err.response) {
        const errorRes = err.response.data;
        console.log("服务端错误：", errorRes.error);
      }
    }
  }

可选优化建议 #

你当前后端校验失败返回的201状态码不符合REST规范，201是资源创建成功的状态码，参数校验失败属于客户端请求错误，应该返回400状态码，修改后端代码如下：

if (errors.length > 0) {
  return res.status(400).json({
    success: false,
    errors,
  });
}

修改后400状态码的响应会进入前端的catch块，你可以统一在catch中处理所有业务错误逻辑。

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