Ajax request status code identification for fetch in Reactjs

Question

I am posting form data to an api using reactjs, I am trying to find out the response so I can put some error handling on my fetch function. My response is as follows, but it is 200:

{}

So how would I put this in a response code?

My submit function is:

handleSubmit(e) {
    e.preventDefault();
  /*global fetch */
    this.setState({ loading: true});
    fetch('https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      }).then(
        (response) => (response.json())
       ).then((response)=>{       
    });
  }

I don't quite get your question. If your know you have a 200 response, even it's an empty JSON, you could put whatever response you what to show to users. — Colin
– Colin, Commented Apr 26, 2020 at 1:50
for example I have tried: if (response.status === 200){ alert("Message Sent."); this.resetForm(); }else alert("Message failed to send."); } which does not work? — Sole
– Sole, Commented Apr 26, 2020 at 1:52
Did you use response.status after you response.json()? Or before? check response.status first, if you it's 200 process data with response.json(), otherwise, pop error message — Colin
– Colin, Commented Apr 26, 2020 at 2:03

Sachin · Accepted Answer · 2020-04-26 07:44:15Z

Fetch promises only reject with a TypeError when a network error occurs. Since 4xx and 5xx responses aren't network errors, there's nothing to catch. You'll need to throw an error yourself to use Promise#catch.

here you can check the status of the response object:

handleSubmit(e) {
   e.preventDefault();
   /*global fetch */
   this.setState({ loading: true});
   fetch('https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
      method: "POST",
      body: JSON.stringify(this.state),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
   }).then((response) => {
    if (response.status === 200) {
       return response.json();
    } else {
      throw new Error('Something went wrong');
    }
  })
  .then((responseJson) => {
    // Do something with the response
  })
  .catch((error) => {
     console.log(error)
  });
}

Kid · Accepted Answer · 2020-04-26 02:21:24Z

0

You are not returning anything from your fetch. Cuz your 2nd .then is empty.

handleSubmit(e) {
    e.preventDefault();
  /*global fetch */
    this.setState({ loading: true});
    fetch('https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
      }).then(
        (response) => (response.json())
       ).then((response)=>{ 
            alert("Message Sent.");
            this.resetForm();
            return response; })
       .catch((e)=> {
            alert("ERROR");
            console.log(e);
       })
  }

edited Apr 26, 2020 at 2:21

answered Apr 26, 2020 at 2:16

Kid

1,2602 gold badges16 silver badges32 bronze badges

3 Comments

Sole Over a year ago

Where would I add a conditional statement for send or error catching as follows: if (response.status === 200){ alert("Message Sent."); this.resetForm(); }else alert("Message failed to send."); }

Colin Over a year ago

The Promise returned from fetch() won’t reject on HTTP error status even if the response is an HTTP 404 or 500. Instead, it will resolve normally (with ok status set to false), and it will only reject on network failure or if anything prevented the request from completing.

Sole Over a year ago

strange thing is both alerts trigger?

Collectives™ on Stack Overflow

Ajax request status code identification for fetch in Reactjs

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related