how to get response data in fetch if status code is 400 react js

Question

I am fetching data from a api end point. It takes username,email,password,firstname,lastname and register it to database. Now if some error occurs like email already used then it gives a 400 status code and sends this

{
    "err": "A user with the given email is already registered"
}

so I want to use this api endpoint. In react js I am doing this.

const printError=(err)=>{
    if((typeof(err)=='string'))
        return err
    else if(err.err!=undefined)
        return err.err
    else if(err.message!=undefined)
        return err.message
    else
        return 'Some error occured.Try Again later.'
}
fetch(BaseUrl+'users/signup',{
        method:'post',
        credentials:'include',
        body:JSON.stringify(user),
        headers:{
            'content-type':'application/json'
        }
    })
    .then(response=>{
        console.log(response)
        if(response.ok)
            return response.json()
        else{
            throw new Error(response)
        }
    })
    .then(response=>{
        alert(response.status)
    })
    .catch(error =>  { console.log('Registration error');console.log(error); alert('Registration Failed\nError: '+printError(error)); });

Please tell me how to get this err object when email is already taken.

devansh goyal · Accepted Answer · 2020-10-03 06:17:33Z

3

Sorry for asking and telling the answer myself. The answer to this is throw response.json() if response.ok is false.

answered Oct 3, 2020 at 6:17

devansh goyal

711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manoj · Accepted Answer · 2020-10-02 17:26:53Z

0

fetch provides a simple ok flag that indicates whether an HTTP response’s status code is in the successful range or not. Please refer below link for more details:

https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful

.then(response=>{
        console.log(response)// this is response from server, including all ok and error responses 
        if(response.ok)
            return response.json()
        else{
            console.log(response) ///error message for server should be in this response object only
        }
    })

edited Oct 2, 2020 at 17:26

answered Oct 2, 2020 at 17:10

Manoj

2,0933 gold badges14 silver badges25 bronze badges

4 Comments

devansh goyal Over a year ago

through this ok flag I came to know that my response is not success.but the reason for that is given in the response body so how do i access it.In both the link that you have provided none contain the solution to that

Manoj Over a year ago

The error from server should be in response only (throw new Error(response)), try something like.. response.statustext .... console response if it is not ok, error is there in the response object...

devansh goyal Over a year ago

In response.statustext it will contain bad request .But I want to access{err:"email already taken...."}.If this is not possible with fetch tell me another way.

Manoj Over a year ago

Check if server is sending error message, the response object should have message sent by server, console and try to see response and it's nested objects, like resopnse.startusText, there should be more info in response only.

Collectives™ on Stack Overflow

how to get response data in fetch if status code is 400 react js

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related