Handling response status using fetch in react JS

Question

I just started learning ReactJS. Now I want to know how to handle response status when I make an API request using fetch. Here's my code :

componentDidMount(){
    this.setState({ isLoading: true })
    var id = this.props.match.params.id        

    const api = `bla/bla/${id}`;

    console.log("start call api")
    fetch(api)
        .then((response) => {
            if(response.status === 200){
                console.log("SUCCESSS")
                return response.json();     
            }else if(response.status === 408){
                console.log("SOMETHING WENT WRONG")
                this.setState({ requestFailed: true })
            }
        })
        .then((data) => {
            this.setState({ isLoading: false, downlines: data.response })
            console.log("DATA STORED")
        })
        .catch((error) => {
            this.setState({ requestFailed: true })
        })
    console.log("end call api")
}

I turned off my connection to make a test for 408, but my loading is still appears.

render(){
     const { isLoading, requestFailed } = this.state;
      if(requestFailed){
        return( 
            <div className="errorContainer">
                <a className="errorMessage">Opss.. Something went wrong :(</a>
            </div>
        )
    }
}

here's the log in my browser:

Any ideas to fix this ?

Answer 1

Throw an error when the response is not OK so that it proceeds directly to the catch:

fetch(api)
  .then((response) => {
    if(!response.ok) throw new Error(response.status);
    else return response.json();
  })
  .then((data) => {
    this.setState({ isLoading: false, downlines: data.response });
    console.log("DATA STORED");
  })
  .catch((error) => {
    console.log('error: ' + error);
    this.setState({ requestFailed: true });
  });

Answer 2

According to MDN documentation:

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

A fetch() promise will reject with a TypeError when a network error is encountered or CORS is misconfigured on the server side, although this usually means permission issues or similar — a 404 does not constitute a network error, for example. An accurate check for a successful fetch() would include checking that the promise resolved, then checking that the Response.ok property has a value of true. The code would look something like this:

fetch('flowers.jpg').then(function(response) {
   if(response.ok) {
     return response.blob();
 }
 throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
   var objectURL = URL.createObjectURL(myBlob); 
   myImage.src = objectURL; 
}).catch(function(error) {
 console.log('There has been a problem with your fetch operation: ', 
 error.message);
});

Looking at your code, I don't think your 408 error check will ever run. I don't think it did in fact. Basically what the code above is doing is returning the json response if the request is 200ish ok, otherwise it's throwing an error. If an error occurs, your second then never runs and it gets thrown to your catch block. Perhaps you can set the isLoading: false there?

Also you're log statement for end of api isn't correct. That's being called before your promise completes.

Answer 3

If you want to know both the json response and error code in the same return value, I recommend this method:

async function loginUser(credentials) {
  var resp;
  return fetch("http://127.0.0.1:8000/api/token-auth/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(credentials)
  }).then(response => {
    resp = response;
    return response.json();
  }).then(json => {
    return {
      response: resp,
      json: json,
      error: !resp.ok
    };
  });
}

In this case you will get an array with response, json and error field. This is a better aproach if you use API with per field error messages like this:

{"username":["This field is required."],"password":["This field is required."]}