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

Question

I have developing mern stack web site. In that I have added below codes to handle logging.

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

When I click on login button this onSubmit() function called and will save token in local storage. But, res.data have more details. (from backend it passes logged users information too) So I want to add those to local storage. I tried that as commented in above function. It says error in res. Note : I user react for frontend.

Also I want to handle handle errors in any cases axios.post() didn't work as planned. In server side it send different messages for unmatched credentials and wrong passwords. How can I show those in my page. Thank you.

Answer 1

Since the only accepted data type in localStorage is string, you should stringify it first using JSON API.

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

Now if you want to access the userData from localStorage you just need to convert it back to javascript object.

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

You can have multiple catch in the returned promise of axios.post

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

But those catch will called with the same error so you need to handle it differently in each catch

Another suggestion:

If you want to easily handle the error, you can use higher order function like this

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