web-dev-qa-db-fra.com

Gestion de l'état de réponse à l'aide de l'extraction dans Reaper JS

Je viens de commencer à apprendre ReactJS. Maintenant, je veux savoir comment gérer l'état de réponse lorsque je fais une demande d'API à l'aide de la récupération. Voici mon 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")
}

J'ai désactivé ma connexion pour effectuer un test de 408, mais mon chargement est toujours affiché.

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

voici le journal dans mon navigateur: enter image description here

Des idées pour résoudre ce problème?

javascriptreactjsfetch-api
4
kurniawan26

Selon la documentation MDN:

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

Une promesse fetch () sera rejetée avec une TypeError lorsqu'une erreur réseau est rencontrée ou que CORS est mal configuré du côté serveur, bien que cela signifie généralement des problèmes d'autorisation ou similaire - un 404 ne constitue pas une erreur réseau, par exemple. Une vérification précise pour un fetch () réussi comprendrait la vérification de la résolution de la promesse, puis la vérification de la valeur true de la propriété Response.ok. Le code ressemblerait à ceci:

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);
});

En regardant votre code, je ne pense pas que votre vérification d'erreur 408 s'exécutera jamais. Je ne pense pas que ce soit le cas. Fondamentalement, le code ci-dessus renvoie la réponse json si la demande est 200ish ok, sinon cela génère une erreur. Si une erreur se produit, votre deuxième ne s'exécute alors jamais et il est jeté dans votre bloc catch. Vous pouvez peut-être définir l'isLoading: false là-bas?

De plus, votre déclaration de journal pour la fin de l'API n'est pas correcte. C'est appelé avant la fin de votre promesse.

5
Charles Owen

Lance une erreur lorsque la réponse n'est pas correcte pour qu'elle passe directement au 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 });
  });
5
CertainPerformance