如何正确地将自定义错误从后端（Express）传递到前端（Vue）

Posted 2023-02-22

【中文标题】如何正确地将自定义错误从后端（Express）传递到前端（Vue）

【英文标题】：How to properly pass custom errors from Backend (Express) to Frontend (Vue)

【发布时间】：2019-10-04 14:21:36

【问题描述】：

我正在开发一个基本的 Node 应用程序，我遇到了一个我认为并不新鲜但我不明白哪种方法才是正确的解决方法。我需要处理那些不是由代码、网络或数据库生成但应用程序逻辑需要的错误。作为示例，我使用 已经注册的用户，但在应用程序的不同情况下将需要相同的处理。

我从登录组件中的方法开始：

register () 
  API
    .register(this.credentials)
    .then(
      data => 
        this.user = data;
      ,
      error => 
        this.error = error;
      )
    .catch(error => 
      this.error = error;
    );
,

API 是：

register (credentials) 
 return Axios
  .post('/auth/register',credentials)
  .then(response => 
    return response.data;
  )
,

后端是：

router.post('/auth/register',(req,res) => 
User.findOne(where:username:req.body.username)
  .then(user => 
    if (!user) 
      User
        .create(req.body)
        .then(user => 
          res.send(user);
        )
     else 
      throw 'Username already exists';
    
  );
);

我期望的是错误

throw '用户名已经存在';

（但它可能是没有为您的搜索找到数据）被传递回捕获它的组件并显示错误而不是注册用户。 我尝试在每个 then 之后添加 catch 或使用 res.send(error:...) 而不是 throw 但这样组件将错误消息显示为用户对象。

【参考方案1】：

使用HTTP Status Codes 通过 HTTP 传播错误：

后端：

router.post('/auth/register',(req,res) => 
console.log('backend register 3',req.body);
User.findOne(where:username:req.body.username)
  .then(user => 
    if (!user) 
      User
        .create(req.body)
        .then(user => 
          console.log('backend register 4',req.body);
          res.send(user);
        )
     else 
      res.status(409).send('User already exists')
    
  );
);

正面：

register (credentials) 
 return Axios
  .post('/auth/register',credentials)
  .then(response => 
    return response.data;
  )
  .catch(err => 
    processError(err);
  )
,

【讨论】：

我也尝试过这种方式，但是 Axios 不是在 then 部分而是在 catch 部分接收到 status(409) 导致组件作为带有状态代码但没有我的自定义消息的标准错误消息。

最好的解决方案是使用 axios 响应拦截器，因为您已经在使用 axios。通过使用它，您可以从一个地方处理所有错误。

axios 响应拦截器记录与 .catch 方法相同的错误。它只是说“请求失败，状态码为 409”，而不是 Express 传递的自定义错误 :(

那么您正确地收到了来自您的快递的 409 错误。注意，错误代码和自定义消息通常是两个不同的字段。查看您的 err 对象以查找消息。