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

Question

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

 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() 没有按计划工作。在服务器端，它会针对不匹配的凭据和错误的密码发送不同的消息。我怎样才能在我的页面中显示这些内容。谢谢。

Answer 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 */ }))

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

How to fix this function to handle different error type of error catching

reactjs

mern