如何在 React 中查看 axios 错误响应 JSON

Question

我的反应中有一个表单，它允许用户填写他们的信息，然后在提交后发送 Post 请求以在我的数据库中创建一个新用户。我正在使用 axios 通过节点后端进行 http 调用。发布请求在后端工作，但我现在正在尝试处理前端的错误（即，如果用户输入了无效的电子邮件，后端会捕获此信息并将错误状态发回，我想向用户说他们需要输入有效的电子邮件等）。

我的后端有以下代码来处理请求：

const { check, validationResult } = require('express-validator/check');

studentRoutes.route('/add').post([
  check('email').isEmail(), check('class_year').isInt({min: 2014, max: 2022})],
  function (req, res) {

  //make sure input is valid
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(422).json({ errors: errors.array() });
  }
  .
  .
  .
  //post call succesful
  res.status(200).send("Student successfully Added to database");
});

在前端，我按如下方式进行 http 调用：

app.post('student/add', obj)
    .then(res => console.log(res.data))
    .catch(err => console.log(err));

其中 app 是 axios。

当我使用正确的数据尝试此操作时（即不应返回错误），消息“学生成功添加到数据库”将按预期打印到控制台。

当我用错误的电子邮件尝试此操作时（即应该返回错误），打印到我的控制台的所有内容是：

(X) POST http://localhost:4000/student/add 422 (Unprocessable Entity)
Error: Request failed with status code 422
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)

我的浏览器捕获了第一个 POST 错误，而以“错误：...”开头的第二部分打印到控制台。

当我尝试访问错误（err.errors 或类似）时，它返回未定义。如何访问状态代码和发送的错误正文？

注意：我也试过用 替换该行return res.status(422).json({ errors: errors.array() });，return res.status(422).send({ errors: errors.array() });但这无济于事，结果是一样的。

Answer 1

您应该能够像这样访问：

catch (err) { 
  console.error(err.response.data.errors);
}

Answer 2

尝试：

error.message

或者取决于后端配置：

error.response