如何显示从 Node.js API 发送到 Next.js 的验证错误

Posted 2023-03-11

【中文标题】如何显示从 Node.js API 发送到 Next.js 的验证错误

【英文标题】：How to show validation errors sent from Node.js API to Next.js

【发布时间】：2020-03-05 11:10:16

【问题描述】：

我创建了一个 Node.js API，并正在使用 Next.js 向它发出请求

这是我的 Node.js 控制器。我正在使用 express 验证器进行验证。

如果我正确填写了表格，它会起作用，并且数据会按预期保存在 mongo 中。但是，当表单未正确填写时，我想将验证错误发送回客户端。如果我查看控制台，我可以在网络选项卡中看到错误。

exports.register = async (req, res) => 
  // check if user exists in the database already
  const emailExists = await User.findOne( email: req.body.email );
  if (emailExists) return res.status(400).send("Email already exists");

  // hash password
  const salt = await bcrypt.genSalt(10);
  // hash the password with a salt
  const passwordhash = await bcrypt.hash(req.body.password, salt);

  // create new user
  var user = new User(
    name: req.body.name,
    email: req.body.email,
    password: passwordhash
  );
  try 
    user = await user.save();
    res.send( user: user._id );
   catch 
    res.status(400).send(err);
  
;

在 Next.js 中，这里是发出 http 请求的代码

  handleSubmit = event => 
    const  name, email, password  = this.state;
    event.preventDefault();
    const user = 
      name,
      email,
      password
    ;

    try 
      register(user);
     catch (ex) 
      console.log(ex);
    
  ;

export const register = async user => 
  const data = await http.post("http://localhost:8000/api/user/register", user);
  console.log(data);
  return data;
;

在控制台中，我看到的是以下内容。所以我在 catch 中所做的 console.log 不起作用。

POST http://localhost:8000/api/user/register 422 (Unprocessable Entity)

未捕获（承诺中）错误：请求失败，状态码为 422 在 createError (createError.js:16) 定居时 (settle.js:17) 在 XMLHttpRequest.handleLoad (xhr.js:59)

【问题讨论】：

如果我的回答有帮助请告诉我。

【参考方案1】：

那是因为函数本身没有抛出异常，所以没有运行 catch 语句。您应该像这样在函数中添加错误处理：

 try 
      register(user);
     catch (ex) 
      console.log(ex);
    
 ;

export const register = async user => 
  const data = await http.post("http://localhost:8000/api/user/register", user).catch((e) 
    throw new Error(e);
  );
  console.log(data);
  return data;
;

【讨论】：

抱歉，这不起作用。 'catch' 后有一个语法错误，我正在尝试修复。

【参考方案2】：

我设法让它像这样工作：

try 
  const response = await register(user);
  console.log(response);
 catch (ex) 
  if (ex.response && ex.response.status === 422) 
    const errors = ex.response.data.errors;
    this.setState( errors );