Question

我正在开发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有更多详细信息。（它也从后端传递记录的用户信息）所以我想将它们添加到本地存储中。我尝试了上面功能中评论的那样。它表示资源错误。注意：我对前端做出反应。

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

Answer 1

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

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

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

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

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

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

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

1 个答案: