0
votes

wait abandonne la fonction dans une application React. Pourquoi?

J'essaie de récupérer des données et de définir l'état dans l'application React. Alors que la récupération est réussie, comme je peux voir les données dans les outils de développement Chrome, l'exécution s'arrête à l'instruction await dans le code ci-dessous. Seule "obtenir des données" est enregistrée. On dirait qu'après l'instruction fetch, la fonction retourne, avec toutes les étapes suivantes exécutées avec succès.

Qu'est-ce que je fais de mal ?? Toute aide est très appréciée.

import util from "util";
const fetchProm = util.promisify(fetch)
....
getDataFromDb = async () => {
    console.log('getting data')
    let result = await fetchProm("http://localhost:3001/getData")
      .then(data => {
        console.log("then1:",data)
        return data.json()
      })
      .then(res => {
        console.log('then2:', res.data)
        return { data: res.data }
      })
      .catch(err => {
        return { err: err.data }
      });
    console.log("result:", result)
    this.setState({ data: result.data })
  };

reactjs async-await fetch

0 commentaires

3 Réponses :

0
votes

vous n'avez pas besoin de .then callback si vous utilisez async-await. essayez l'exemple ci-dessous:

import util from "util";
const fetchProm = util.promisify(fetch)

getDataFromDb = async () => {
    console.log('getting data')
    let {data} = await fetchProm("http://localhost:3001/getData");
    console.log("result:", data)
    this.setState({ data })
  };

1 commentaires

ça marche. mais avec plus de modifications. Je n'ai pas non plus besoin d'utiliser promisify. attendez simplement fetch (" localhost: 3001 / getData" ) fonctionne bien. Merci beaucoup pour le soutien.

0
votes

Avec async / wait, vous n'avez pas besoin de puis . Vous détectez également des erreurs sur le second alors et non sur le premier.

Pouvez-vous essayer:

 let result = await fetchProm("http://localhost:3001/getData")

console.log(result)

et voir si cela fonctionne?

1 commentaires

0
votes

Lorsque vous utilisez async / await , n'oubliez pas de gérer vos exceptions avec try / catch Changez votre code en:

import util from "util";

getDataFromDb = async () => {
    try{
        let {data} = await fetchProm("http://localhost:3001/getData");
        this.setState({ data })
    }
    catch(err=> this.setState({ err: err.data }))
};

1 commentaires

oui je l'ai en place. J'ai posté du code minimal ici. Quoi qu'il en soit, merci pour les commentaires.