Why Request API when error always goes to catch

Question

I have some questions about requesting API from the server. I make a function for request API, the example I have a request API login when the user fills the email wrong, response API is "email or password is wrong!", when I try in postman is success the response but when I try in my code the response always from the catch, not from response API. My code for request API like below

 const handleSubmitLogin = async (input) => {
    try {
      const result = await axios.post(`${BASE_URL}/users/client/login`, input);
      if (result.status == 200 || result.status === "success" || result.status == 201) {
        await setAuthKey(result.data.data.token);

        await setLoggedUser(JSON.stringify(result.data.data));

        dispatch(setUserLogin());
        dispatch(setDataLogin(result.data.data));
      } else {
        setModalActive({ status: true, data: result.message });
      }
    } catch (error) {
      console.log(error);
      setModalActive({ status: true, data: translations["please.try.again"] });
    }
  };

when a user fills an email or password wrong, the response is always from the catch response not from the API response. Can anyone give suggestions for this case?

Edit: This is result from when user wrong password

Answer 1

If your API responds with a non-successful status code (>= 400), Axios will reject the promise and your code will go into the catch block.

You can still access the response data via error.response.data. See Axios - Handling Errors

try {
  const result = await axios.post(`${BASE_URL}/users/client/login`, input);

  // etc...
} catch (err) {
  console.warn("login", error.toJSON());
  setModalActive({
    status: true,
    data: error.response?.data?.message ?? translations["please.try.again"],
  });
}

It's important to use optional chaining since the error may not have a response or data depending on what exactly failed.