快速错误处理：向前端发送消息

Question

我在处理身份验证 API 调用时遇到了一些错误。当我从 Express 发送 500 状态时，我的前端（在这种情况下为 Vue）只接收消息 Request failed with status code 500 而不是像 这样对分类更有帮助的消息，这是最糟糕的永远出错（在下面的示例中）。

在下面的示例中，当我从 API 调用“/post”时，我抛出了一个由我的自定义中间件处理的错误。中间件成功处理错误并将适当的状态发送到我的前端，但我不知道如何发送有用的消息（例如“这是有史以来最糟糕的错误”）/在前端访问它们。

这是一个常见的用例吗？我在做任何明显错误的事情吗？我发送的消息是否出现在 (err) 参数中，还是我需要添加一个 resp 参数？

“/login”的快速路线

router.post('/login', (req, res, next) => {
    throw Error('this is the worst error ever')
})

自定义快速错误处理程序

app.use(function(err, req, res, next) {
    res.status(err.status || 500).send({
        error: {
            status: err.status || 500,
            message: err.message || 'Internal Server Error',
        },
    });
});

在 Vue 中处理 API 响应

login (e) {
    e.preventDefault();
    UserService.login(this.username, this.password) //this is simple axios post call 
    .catch((err) => {
         this.loginStatus = err.message
         return
    })
}

Answer 1

为那些认为这很有帮助的人找到了答案。捕获的错误有一个响应变量。这是通过 express send 命令发送数据的地方。请参阅下面的前端更正代码：

login (e) {
    e.preventDefault();
    UserService.login(this.username, this.password) //this is simple axios post call 
    .catch((err) => {
         this.loginStatus = err.response.data.message
         return
    })
}

Answer 2

我认为你需要补充：

Throw new Error()

而不是

Throw Error

如果您正在进行异步调用，您可以这样做

app.get('/', function (req, res, next) {
  fs.readFile('/file-does-not-exist', function (err, data) {
    if (err) {
       next(err) // Pass errors to Express.
    } else {
       res.send(data)
    }
  })
})

代码应如下所示：

router.post('/login', (req, res, next) => {
   throw new Error('this is the worst error ever')
})

在express documentation查看这个