Question

我正在使用反应和表达。在react app中，我想使用axios.post发送用户的凭证来表示服务器，并希望收到它的响应。我想从响应中提取消息和状态。看起来像这样：

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));
  };

在后端，我使用猫鼬模型来查找用户是否已经存在于数据库中。

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"));
});

如果一切正常，并且数据库中有一个具有这些凭据的用户，我将按预期收到控制台中的消息“您已登录”和状态200 但如果发生错误，我不会收到axios响应自定义错误消息，例如“数据库中没有此类用户”或“密码错误”，而是出现默认错误，我想，它看起来像这样：

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响应“ DB中没有这样的用户”中收到此消息。

Answer 1

要使axios捕获服务器响应：

抓住axios，从console.log(error)修改为console.log(error.response)。

参考：https://github.com/axios/axios/issues/960#issuecomment-309287911

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

将新变量error: null添加到您的状态。
在axios中，在其块中的.then(res=> {})中，您有条件地引发错误。
例如：

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

The syntax of Error：

新错误（[[message [，fileName [，lineNumber]]]）

抛出的错误将在catch块中被捕获，该块是：

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

现在，错误的内容位于状态为error的对象内。
要访问并显示您的自定义消息，取决于您想要的位置，它可以是：

this.state.error.message或(this.)props.error.message

如何使用React App中的axios从Express Server获得有关错误的响应

1 个答案: