如何顯示從 Node.js API 發送到 Next.js 的驗證錯誤

Question

我創建了一個 Node.js API 並正在使用 Next.js 向它發出請求

這是我的 Node.js controller。 我正在使用快速驗證器進行驗證。

如果我正確填寫表格，它可以工作，並且數據按預期保存在 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)

未捕獲（承諾中）錯誤：在 XMLHttpRequest.handleLoad (xhr.js:59) 的結算 (settle.js:17) 處的 createError (createError.js:16) 請求失敗，狀態碼為 422

Answer 1

那是因為沒有運行 catch 語句，因為 function 本身沒有拋出異常。 您應該像這樣在 function 中添加錯誤處理：

 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;
};

Answer 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 });
  }
}