CODEWITHSUNDEEP
javascript
Evanss
Evanss

Reputation: 23583

Returning new Error appears in then not catch function?

I have a login function which returns an Error when a login attempt fails: 

export const login = async () => {
  try {
    // Code to get res

    if (res.status === 200) {
      document.cookie = `userToken=${data.token}`;
    } else if (res.status === 400) {
      return new Error("Oh noo!!!");
    }
  } catch (err) {
    alert('err!! ', err);
  }
};

The login form calls it with this: 

submit = async event => {
    login()
      .then(res => {
        console.log('res ', res);
      })
      .catch(err => {
        console.log('err ', err);
      });
  };

When res.status is 400 and an Error is returned it appears in the then function not the catch function. How can I instead make it appear in the catch function? I assume this is best practice as the login attempt has failed.

Upvotes: 2

Views: 634

Answers (2)

Luca Kiebel
Luca Kiebel

Reputation: 10096

You should throw the error instead of returning it, throw ... raises an exception in the current code block and causes it to exit, or to flow to next catch statement if raised in a try block. 

export const login = async () => {
  try {
    // Code to get res

    if (res.status === 200) {
      document.cookie = `userToken=${data.token}`;
    } else if (res.status === 400) {
      throw Error("Oh noo!!!");
    }
  } catch (err) {
    alert('err!! ', err);
  }
};

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370729

When the interpreter sees an expresssion after return, that expression will be returned as soon as it's evaluated - even if it's an error, it won't go into the catch block. Declaring an error by itself won't cause a problem either - you need to actually throw it:

} else if (res.status === 400) {
  throw new Error("Oh noo!!!");
}

If you want the submit function to handle the error as well, then don't put the try / catch in login, because then the async function call will resolve rather than be rejected - instead, just let login throw, while submit handles the catch:

export const login = async () => {
  if (res.status === 200) {
    document.cookie = `userToken=${data.token}`;
  } else if (res.status === 400) {
    throw new Error("Oh noo!!!");
  }
};

Upvotes: 2

Related Questions