Question

目前正在学习NodeJS和Nuxt。我希望完全理解从客户端（前端）向服务器（后端）发送对象然后接收响应的周期。

例如，我希望发送一个简单的注册对象：

registerInfo: {
 username: '',
 email: '',
 password: ''
}

该对象通过Vuex操作发送：

async register (vuexContext, registerInfo) {
    try {
      const response = await axios.post('/register', registerInfo)
      console.log(response)
    } catch (err) {
      console.log(err)
    }
  }

路由器（后端在Express中运行）收到请求并调用控制器文件中的相应功能：

router.post('/register', userController.register)

控制器文件功能如下：

exports.register = async (req, res) => {
  const user = new User(req.body)

  try {
    await user.save()
    res.send({ user })
  } catch (err) {
    res.sendStatus(404).send(err)
  }
}

我想显示所有问题的步骤。假设我们发送了一个空对象（前端表单中未输入任何值），并且Mongoose Schema（下面的代码）指定了所有字段都是必需的。

当猫鼬要保存到数据库时，它将在Schema中运行并引发错误（即：“需要用户名”），该错误将调用catch代码。其中，我想将状态404发送回客户端。但是，与此同时，我也想发送错误对象。

但是，这是我在前端控制台上看到的：

它不包含错误对象（是的，在上面的代码中我没有包含它，但是.send（err）也不起作用）。另外，我可以在try块中通过检查 response 对象的 error 属性来完成整个过程。但是我觉得这很hacky，而不是“傻瓜式”的。我是一名初级开发人员，因此在这方面我可能完全错了。

有人对我的问题有任何见识吗？

谢谢

const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    minlength: [3, 'Username must be at least 3 characters long'],
    required: [true, 'Username is required'],
    unique: [true, 'Username already exists.']
  },
  email: {
    type: String,
    required: [true, 'Email is required'],
    unique: [true, 'Email already exists.']
  },
  password: {
    type: String,
    minlength: [5, 'Password must be at least 5 characters long.'],
  }
})

Answer 1

res.sendStatus（statusCode）

将响应HTTP状态代码设置为``状态代码''，并将其字符串表示形式发送为响应正文。

 res.sendStatus(200) // equivalent to res.status(200).send('OK')
 res.sendStatus(403) // equivalent to res.status(403).send('Forbidden')
 res.sendStatus(404) // equivalent to res.status(404).send('Not Found') 
 res.sendStatus(500) // equivalent to res.status(500).send('Internal Server Error')

在您的代码中，您要像这样发送，因此它会跳过您的错误对象。

所以你只是这样改变

res.status(404).send(err)

我也更新了js，

exports.register = async (req, res) =>
 { 
    const user = new User(req.body)
    user.save().then(()=> res.send({ user })).catch(err => res.sendStatus(404).send(err)):


 }

Answer 2

?出现错误404的唯一原因，这是因为如果您从验证中得到一些错误，则您只会res.sendStatus(404)。

??‍?将此res.sendStatus(404);更改为res.status(400).send(error)；

现在，您的代码如下所示：?

exports.register = async (req, res) => {
  const user = new User(req.body)
  try {
    await user.save()
    res.send({ user })
  } catch (err) {
    // 400: badrequest
    res.status(400).send(err)
  }
}

?更新：在前端注册

您可以先尝试使用此代码。尝试打印出响应或错误：

register (vuexContext, formValue) {
    axios.post('/moments/api/register', formValue).then((response) => {
      console.log('Result: Succesfully to save data')
      console.log(response.data)
    }).catch((ex) => {
      console.log(`Result: Error result`)
      console.log(ex.response)
      console.log(ex.response.data)
    })
  }

?更新（2）：提交表单更改

??‍?您可以使用以下代码更改表单注册：register.vue：?

<form v-on:submit.prevent="register(registerInfo)" method="POST" >
  <input type="text" v-model="registerInfo.username" name="username" placeholder="Username">
  <input type="email" v-model="registerInfo.email" name="email" placeholder="Email">
  <input type="password" v-model="registerInfo.password" name="password" placeholder="Password">
  <input id="register" type="submit" placeholder="Register">
</form>

使用上面的表单，当您单击提交按钮时，它将使您的表单永远不会重新加载。

希望它能对您有所帮助。

Answer 3

我假设您已经用res.sendStatus(404).send(err)更改了res.status(404).send(err);。

现在在客户端，您可以使用err.response.data读取错误响应数据。

  // REGISTER
  async register(vuexContext, registerInfo) {
    try {
      const response = await axios.post("/moments/api/register", registerInfo);
      console.log(response);
    } catch (err) {
      if (err.response) {
        /* The request was made and the server responded with a status code that falls out of the range of 2xx*/
        console.log(err.response.data);
      } else {
        console.log("Error", err.message);
      }
    }
  }

我还建议在服务器端使用以下代码，这意味着仅在错误名称为ValidationError时返回404，在其他情况下返回500：

exports.register = async (req, res) => {
  const user = new User(req.body);

  try {
    await user.save();
    res.send({ user });
  } catch (err) {
    if (err.name === "ValidationError") {
      res.status(404).send(err);
    } else {
      console.log(err);
      res.status(500).send("Something went wrong");
    }
  }
};

发送消息（对象）以及404状态代码（nodejs）

3 个答案: