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

Posted 2023-02-22

【中文标题】如何在 React 中查看 axios 错误响应 JSON

【英文标题】：How to see axios error response JSON in React

【发布时间】：2019-08-16 05:29:49

【问题描述】：

我的反应中有一个表单，它允许用户填写他们的信息，然后在提交后发送一个 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).send( errors: errors.array() ); 替换return res.status(422).json( errors: errors.array() ); 行，但这没有帮助，结果是一样的。

【问题讨论】：

app 这里是 axios 客户端的实例化，我猜？

【参考方案1】：

你应该可以这样访问：

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

【参考方案2】：

试试：

error.message

或者取决于后端配置：

error.response