React+NodeJS注册页面POST请求始终Pending问题求助

我正在开发基于ReactJS和NodeJS的注册页面，向服务器提交数据时请求始终处于pending状态。请帮忙排查哪里出现问题？

前端代码 #

const handleSubmit = (event) => {
    // prevent page refresh
    event.preventDefault();
    const newUserData = {
      name: name,
      email: email,
      password: password,
    };
    axios
      .post("/signup", newUserData)
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
      setEmail("");
      setName("");
      setPassword("")
    console.log("form submitted ✅");
  };

后端代码 #

router.post("/signup", (req, res) => {
  const { name, email, password } = req.body;
  if (!email || !password || !name) {
    res.status(422).send({ error: "Please add all the fields" });
  }
  console.log(req.body);
  User.findOne({ email: email })
    .then((savedUser) => {
      if (savedUser) {
        res.status(422).send({ error: "Email already been used" });
      }
      bcrypt.hash(password, 12).then((hashedpassword) => {
        const user = new User({
          name,
          email,
          password: hashedpassword,
        });
        user
          .save()
          .then((user) => {
            res.json({ message: "Sign Up Successfully" });
          })
          .catch((err) => {
            console.log(err);
          });
      });
    })
    .catch((err) => {
      console.log(err);
    });
});

已配置Proxy #

"proxy": "http://localhost:5000",

问题根源及修复方案 #

1. 错误分支未终止后续代码执行

后端多个条件分支发送错误响应后，没有终止函数运行，导致后续逻辑继续执行，可能引发重复响应或逻辑混乱：

• 缺少必填字段时，返回422响应后未停止，代码仍会执行数据库查询
• 邮箱已存在时，返回422响应后未停止，后续的密码哈希、用户创建逻辑仍会运行

修复：在每个错误响应后添加return，终止函数执行

2. 异常分支未向客户端返回响应

user.save()、bcrypt.hash、User.findOne的catch块仅打印错误，未给客户端返回响应，导致请求因服务器未完成响应一直处于pending状态。

修复：在所有catch块中添加错误响应，告知客户端异常情况

修复后的后端代码

router.post("/signup", (req, res) => {
  const { name, email, password } = req.body;
  
  // 校验必填字段，返回错误后终止函数
  if (!email || !password || !name) {
    return res.status(422).send({ error: "请填写所有字段" });
  }

  console.log(req.body);
  User.findOne({ email: email })
    .then((savedUser) => {
      // 邮箱已存在，返回错误后终止函数
      if (savedUser) {
        return res.status(422).send({ error: "该邮箱已被注册" });
      }

      bcrypt.hash(password, 12)
        .then((hashedpassword) => {
          const user = new User({
            name,
            email,
            password: hashedpassword,
          });

          user.save()
            .then((user) => {
              res.json({ message: "注册成功" });
            })
            .catch((err) => {
              console.log(err);
              return res.status(500).send({ error: "保存用户失败" });
            });
        })
        // 捕获密码哈希异常
        .catch(err => {
          console.log(err);
          return res.status(500).send({ error: "密码加密失败" });
        });
    })
    // 捕获数据库查询异常
    .catch((err) => {
      console.log(err);
      return res.status(500).send({ error: "数据库查询失败" });
    });
});

额外排查点 #

• 确认Node.js服务确实运行在localhost:5000，无端口冲突
• 打开浏览器DevTools的Network标签，检查请求实际地址是否正确代理到后端
• 验证数据库连接是否正常，数据库连接失败会导致Promise进入catch分支，若未返回响应则请求pending

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