如何在 reactjs 中的 nodejs 上收到错误消息答案

【问题标题】：How can i get a error message thrown on nodejs in reactjs如何在 reactjs 中的 nodejs 上收到错误消息
【发布时间】：2021-12-04 02:17:30
【问题描述】：

我试图在后端显示一条错误消息，以防用户已经注册，但我没有得到我想要的结果。

后端代码：

   module.exports.register = asyncHandler(async (req, res) => {
  const { fullname, email, password } = req.body;

  let user = await User.findOne({ email: email });

  if (user) throw new Error("Email e/ou senha inválidos!");
  
  user = await User.create({ fullname, email, password });

  if (user) {
    res.json({
      _id: user._id,
      name: user.fullname,
      email: user.email,
      token: tokenGenereator(user._id),
    });
  } else {
    throw new Error("algo deu errado");
  }

前端代码：

export const register = ({ fullname, email, password }) => {
  return async (dispatch) => {
    try {
      const config = {
        headers: {
          "Content-type": "application/json",
        },
      };
      const data = await axios.post(
        "http://localhost:5000/api/register",
        {
          fullname,
          email,
          password,
        },
        config
      );
      dispatch(
        uiActions.showNotificatoin({
          variant: "success",
          message: "Usuário cadastrado com sucesso!",
        })
      );
      localStorage.setItem("userInfo", JSON.stringify(data));
    } catch (error) {
      console.log(error.response.data.error)
    }
  };
};

这是我在控制台上得到的结果。

我需要做什么才能显示我抛出的消息？

【问题讨论】：

你能记录下数据吗？或尝试使其像这样：const { data } = await...

标签： reactjs mongodb express axios backend

【解决方案1】：

您必须在没有任何捕获层的情况下抛出错误。你可能想做这样的事情

if (user)
    return res.status(409).json({ message: "Email e/ou senha inválidos!" });

在前端你需要捕捉错误并像这样使用错误

if (error.response && error.response.data.message) {
  // custom message you sent from backend
  console.log(error.response.data.message);
} else {
  // generic error message
  console.log(error.message);
}

它适用于您的情况。但理想情况下，大型项目错误应该从控制器存储库中抛出，并且必须由外层捕获，并且作为响应将执行上述工作。

【讨论】：

【解决方案2】：

HTTP 响应代码用于从后端向前端抛出错误 HTTP 响应状态代码指示特定 HTTP 请求是否已成功完成。阅读有关 HTTP 响应代码的更多信息。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

200 状态码表示正常状态。 409 状态码表示冲突状态。

后端代码：

if (!user) {       // by deafult ok status
    res.json({
      _id: user._id,
      name: user.fullname,
      email: user.email,
      token: tokenGenereator(user._id),
    });
  } else {              // in case of user  found
    res.status(409).json("algo deu errado");
  }

前端代码：

    export const register = ({ fullname, email, password }) => {
      return async (dispatch) => {
        try {
          const config = {
            headers: {
              "Content-type": "application/json",
            },
          };
          const data = await axios.post(
            "http://localhost:5000/api/register",
            {
              fullname,
              email,
              password,
            },
            config
          );
          dispatch(
            uiActions.showNotificatoin({
              variant: "success",
              message: "Usuário cadastrado com sucesso!",
            })
          );
          localStorage.setItem("userInfo", JSON.stringify(data));
        } catch (error) {
               if (error.response && error.response.data.message===409) {
  
                      alert('user already exist');
}         else {
  
       console.log('No Internet Connection');
          } 

               
        }
      };
    };

【讨论】：