Question

我的反应中有一个表格，该表格允许用户填写其信息，然后在提交后发送“发布”请求以在数据库中创建新用户。我正在使用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));

应用程序是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错误的地方，第二个以“ Error：...”开头的部分被打印到控制台。

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

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

Answer 1

尝试：

error.message

或者取决于后端配置：

error.response

Answer 2

您应该可以这样访问：

array([[  1,   2,   3, 100, 100, 100],
       [  4,   5,   6, 200, 200, 200],
       [  7,   8,   9, 300, 300, 300],
       [ 10,  11,  12, 400, 400, 400]])

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

2 个答案: