Проблема обработки ошибок ajax запрос в Reactjs с использованием fetch

Question

Я пытаюсь выполнить некоторую обработку ошибок в моем компоненте для запроса POST. По какой-то причине следующее не показывает предупреждения. Любая идея?

Код до сих пор:

import React, { Component } from 'react';

class Contact extends Component {
 constructor(props) {
    super(props);
    this.state = {
    message: '',
    email: '', 
    loading: false,
    successMessage: ''
    };
  }

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

       if (response.status === 'success'){
        alert("Message Sent."); 
        this.resetForm();
      }else if(response.status === 'fail'){
        alert("Message failed to send.");
      }
     /*    
     if (response.ok) {
      this.setState({ successMessage: true});
     }
     */
    });
  }

  onEmailChange(event) {
    this.setState({email: event.target.value});
  }

  onMessageChange(event) {
    this.setState({message: event.target.value});
  }


  render() {
    return (
      <div className="container mt-5">
      <h3>Contact</h3>
      <form id="contact-form" onSubmit={this.handleSubmit.bind(this)} method="POST">
    <div className="form-group mt-4">
        <label htmlFor="exampleInputEmail1">Email address</label>
        <input type="email" className="form-control" required aria-describedby="emailHelp" value={this.state.email} onChange={this.onEmailChange.bind(this)} />
    </div>
    <div className="form-group">
        <label htmlFor="message">Message</label>
        <textarea className="form-control" rows="5" required value={this.state.message} onChange={this.onMessageChange.bind(this)} />
    </div>
    <button type="submit" className="btn btn-primary">Submit</button>
    { this.state.successMessage &&
      <div className="alert alert-success mt-5" role="alert">
  Your message has been successfully sent. Thanks for your message!
</div> }
    </form>
      </div>
    );
  }
}
export default Contact;

Answer 1

Вы можете сделать это легко, немного перефразировав, используя async/await и try/catch block.

async handleSubmit() {
  e.preventDefault();
  try {
    const response = await fetch(
      "https://xxxxxxxxxx.execute-api.eu-west-2.amazonaws.com/xxx",
      {
        method: "POST",
        body: JSON.stringify(this.state),
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
      }
    );

    if (response.status === 200) {
      const jsonResponse = await response.json();
      alert("Message Sent");
      this.resetForm();
      this.setState({ successMessage: true });
    }

    alert("Message failed to send.");

  } catch (error) {
    console.log(error);
  }
}

Answer 2

Этот код имеет проблему.

 if (response.status === 'success'){
    alert("Message Sent."); 
    this.resetForm();
  }else if(response.status === 'fail'){
    alert("Message failed to send.");
  }

Response.status возвращает один из кодов состояния, упомянутых здесь . Вы должны проверить один из целочисленных кодов состояния, НЕ УДАЧА / СБОЙ

В качестве альтернативы вы можете проверить Response.ok , который возвращает логическое значение.

Таким образом, ваш код будет выглядит как

   if (response.ok){
    alert("Message Sent."); 
    this.resetForm();
  } else {
    alert("Message failed to send.");
  }

Примечание: Проверьте на наличие поддержки браузера API перед использованием в работе. MDN

Answer 3

if (response.status === 200){
        alert("Message Sent."); 
        this.resetForm();
      }else
        alert("Message failed to send.");
      }

извлечение возвращает 200 в случае успеха, а не success