Skip to content

How to throw Catch in fetch POST request in react native

I am having a problem with calling an error when i call a POST request in React Native, i know that there is a catch but it only throws for network connections, how do i do that with errors i get from the response when i have a wrong password or wrong username like when this Error is called from the Response:

Object {
  "error": "invalid_request",
  "error_description": "Missing form parameter: grant_type",
}
    fetch("https://websiteo.com/auth/realms/realmsid/protocol/openid-connect/token", {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded.toString(),
    })
      .then(response => response.json())
      .then(result => {
        //console.log(result)
        console.log(result)
        saveToken('secure_access_token', `${result.access_token}`)
        props.navigation.navigate('HomeApp') //i need to throw catch also when username or password wrong
      })
      .catch(error => alert(error.response.data)) //This is only thrown when network problems 

Answer

You can verify in response json if was 200 or failed, something like this:

fetch("https://websiteo.com/auth/realms/realmsid/protocol/openid-connect/token", {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded.toString(),
})
  .then(response => {
     if (response.ok) {
        return response.json();
     } else {
        throw new Error('Something went wrong');
     }
  })
  .then(result => {
    //console.log(result)
    console.log(result)
    saveToken('secure_access_token', `${result.access_token}`)
    props.navigation.navigate('HomeApp')
  })
  .catch(error => alert(error.response.data)) //This is only thrown when network problems