无法在vue端显示express res.send()自定义的错误信息。

Posted 2021-03-19

我有一个带有express和mysql的nuxt应用程序。

问题 : 我无法在vue端显示express res.send()自定义错误信息。

假设我想显示一个用户的信息。

这是我的后端代码。

// Find a single User with a userId
exports.findOne = (req, res) => {
  User.findById(req.params.userId, (err, data) => {
    if (err) {
      if (err.kind === 'not_found') {
        res.status(404).send({
          message: `Not found User with id ${req.params.userId}.`
        })
      } else {
        res.status(500).send({
          message: 'Error retrieving User with id ' + req.params.userId
        })
      }
    } else { res.send(data) }
  })
}

这里是Vue的部分

<script>
import axios from 'axios'
import appNavbar from '~/components/appNavbar.vue'

export default {
  components: {
    appNavbar
  },
  data () {
    return {
      userId: '',
      userData: '',
      errorMsg: ''
    }
  },
  methods: {
    fetchUser (evt) {
      evt.preventDefault()
      return axios.get('/api/users/' + this.userId)
        .then((res) => {
          this.userData = res.data
        })
        .catch((err) => {
          this.errorMsg = err.toJSON()
        })
    }
  }
}
</script>

当我给出一个不存在的用户的id时，我希望能够得到写在后面的自定义错误信息，并在前面显示出来。

但我只得到这个JSON

{ "message": "Request failed with status code 404", "name": "Error" }

有没有人有一个线索？

答案

这个错误可能是因为你在调用API时没有设置主机。

return axios.get('/api/users/' + this.userId)

404错误是因为浏览器没有找到这个端点.在这种情况下,我建议你尝试在另一个工具中调用这个端点(如Postman),并证明你的API是否正确响应.之后,修复你对端点的调用,也许它会像下面的代码一样,然后再尝试:

return axios.get(`${your host here}/api/users/ + ${this.userId}`)

另一答案

EDIT : SOLUTION FOUND

在这里找到了答案。https:/github.comaxiosaxiosissues960#issuecomment-309287911。

在vue部分，捕捉应返回 err.response，而不仅仅是 err.因此，为了显示您的自定义错误信息，它应该像这样。

.catch((err) => {
          this.errorMsg = err.response

---