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

【问题标题】：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 方法。你有正确的想法，但我认为你缺乏语法知识。
我一定会看看这些概念。谢谢你的建议

标签： reactjs mern

【解决方案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 */ }))

【讨论】：