Reactjs 如何在react应用程序中使用axios从express server获取有关错误的响应

我用的是react和express。在react应用程序中，我想使用axios.post将用户的凭据发送到express server，并希望从中收到响应。我想从响应中提取消息和状态。看起来是这样的：

handleSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
    axios
      .post("/api/users/login", {
        email,
        password
      })
      .then(res => console.log(res.data.msg, res.status))
      .catch(err => console.log(err));
  };

xhr.js:166 POST http://localhost:3000/api/users/login 400 (Bad Request)
Login.js:21 Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

在后端，我使用mongoose模型来确定数据库中是否已经存在该用户

router.post("/login", (req, res) => {
  const { email, password } = req.body;

  User.findOne({ email })
    .then(user => {
      if (!user) return res.status(400).json({ msg: "No such user in the DB" });

      bcrypt.compare(password, user.password).then(isMatch => {
        if (!isMatch) {
          return res.status(400).json({ msg: "Wrong password" });
        }

        req.session.userId = user.id;
        res.status(200).json({ msg: "You have logged in" });
      });
    })
    .catch(err => console.log("Error in catch in findOne"));
});

如果一切正常，并且数据库中有一个具有这些凭据的用户，我将按照预期在控制台中收到消息“You have loggin”（您已登录）和状态200 但是 如果发生错误，我不会在axios响应中收到自定义错误消息，如“数据库中没有这样的用户”或“密码错误”，而是收到默认错误，我猜，它是这样的：

handleSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
    axios
      .post("/api/users/login", {
        email,
        password
      })
      .then(res => console.log(res.data.msg, res.status))
      .catch(err => console.log(err));
  };

xhr.js:166 POST http://localhost:3000/api/users/login 400 (Bad Request)
Login.js:21 Error: Request failed with status code 400
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

---

我的问题是：如果出现任何错误，我如何获得自己的错误消息而不是默认消息。例如：如果密码不正确，我希望在axios响应中收到此消息“数据库中没有这样的用户”。

要使axios捕获服务器响应：

在axios的catch中从

console.log（error）

修改为

console.log（error.response）

参考资料：

---

对于react中的自定义错误处理：

向您的状态添加一个新变量

错误：null

在axios中，在

中，然后（res=>{}）

在其块内有条件地抛出一个错误。
例如：

.then( res => {
 if(res.status === 400) {throw new Error("your custom message")}
   ...your code...
 })

:

新错误（[消息[，文件名[，行号]]）

抛出的错误将在下一个

catch

块中捕获，即：

.catch(err => this.setState({error:err}))

现在，错误的内容在状态为的

error

对象中。
要访问和显示您的自定义消息，根据您的需要，它可以是：

---

this.state.error.message

或

（this.）props.error.message

您发送回的

msg

字段不是自定义字段吗？它是自定义字段，但如果密码错误或用户不在数据库中，我不会在axios响应中收到它。我刚刚在控制台中收到这条消息：xhr.js:166 POST 400（错误请求）谢谢，它成功了，但是你能解释一件事吗？例如，我在想，如果我这样使用验证：

if（！user）return res.status（400）.json（{msg:“数据库中没有这样的用户”}）

我可以在

axios中获取自定义错误消息。然后（res=>res.data.msg）

部分。我想当我返回res.status…时，我会结束请求并将响应发送到前端。为什么我的自定义错误出现在.catch部分。我想我错过了一些关于express的事情？@madjack99我真的很高兴它对你有用，我也学到了一些东西。我不想假装我是专家，但据我所知（使用react+express+mongoose堆栈，我做了简要介绍），您必须向您的状态添加一个变量

error:null

，然后在

中（res=>{…}）

块中，有条件地抛出一个错误，如：

if（res.status==400）{抛出新错误“您的消息”)

。接下来它将被捕获到catch块中，即

catch（err=>this.setState（{error:err}）

，现在取决于要显示它的

this.state.error.message

或

（this.）props.error.message

@madjack99有效吗？如果有效，我会将其添加到答案中。@madjack99谢谢你的反馈，我真的很关心我想解决的问题。顺便说一句，我没有投你反对票，我会投你赞成票，因为我发现你的问题不仅有效，而且非常有趣。