如何修复此功能以处理不同类型的错误捕获

Posted 2023-02-16

【中文标题】如何修复此功能以处理不同类型的错误捕获

【英文标题】：How to fix this function to handle different error type of error catching

【发布时间】：2019-09-16 17:15:01

【问题描述】：

我正在开发 mern stack 网站。为此，我添加了以下代码来处理日志记录。

 onSubmit(e) 
        e.preventDefault();
        const obj = 
            user_name: this.state.user_name,
            password: this.state.password
        ;
        axios.post('http://localhost:4000/login', obj)
            .then(res=> localStorage.setItem('token',(res.data.token))
                 //localstorage.setItem('username','res.data.user.username)
                 )
    

当我单击登录按钮时，此onSubmit() 函数将被调用并将令牌保存在本地存储中。 但是， res.data 有更多的细节。 （从后端它也传递登录的用户信息） 所以我想将它们添加到本地存储中。我尝试了上述功能中的评论。它说 res 中的错误。注意：我用户对前端做出反应。

我还想在axios.post() 没有按计划工作的任何情况下处理错误。在服务器端，它为不匹配的凭据和错误的密码发送不同的消息。我怎样才能在我的页面中显示这些。谢谢。

【问题讨论】：

您应该阅读箭头函数、对象解构和 Promise 方法。你有正确的想法，但我认为你缺乏语法知识。

我一定会看看这些概念。谢谢你的建议

【参考方案1】：

由于localStorage 中唯一接受的数据类型是字符串，您应该首先使用JSON API 对其进行字符串化。

const userDataStr = JSON.stringify(res.data);
localStorage.setItem('userData', userDataStr);

现在，如果您想从localStorage 访问userData，只需将其转换回javascript 对象。

const userDataStr = localStorage.getItem('userData', userData);
const userData = JSON.parse(userDataStr);

axios.post返回的promise中可以有多个catch

axios.post()
  .catch((error) =>   )
  .catch((error) =>   )

但是那些catch 将使用相同的error 调用，因此您需要在每个catch 中以不同方式处理它

另一个建议：

如果你想轻松处理错误，你可以像这样使用高阶函数

const handleError = (status, callback) => (error) => 
  if (status === error) 
    callback(error);
  


axios.post()
  .catch(handleError(404, (error) =>  /* only called when status === 404 */ ))
  .catch(handleError(500, (error) =>  /* only called when status === 500 */ ))