Utiliser Async/Await avec Axios dans React.js

Question

Suivant

Comment utiliser async/await avec axios dans react ?

J'essaie de faire une simple demande d'accès à mon serveur en utilisant Async/Await dans une application React.js. Le serveur charge un simple JSON à /data qui ressemble à ceci

JSON

{
   id: 1,
   name: "Aditya"
}

Je suis capable de récupérer les données dans mon application React en utilisant la simple méthode jquery ajax get. Cependant, je veux utiliser la bibliothèque axios et Async/Await pour suivre les normes ES7. Mon code actuel ressemble à ceci :

class App extends React.Component{
 async getData(){
     const res = await axios('/data');
     console.log(res.json());
 }
 render(){
     return(
         <div>
             {this.getData()}
         </div>
     );
 }
}

En utilisant cette approche, j'obtiens l'erreur suivante :

Les objets ne sont pas valides en tant qu'enfant React (trouvé : [object Promise]). Si vous voulez rendre une collection d'enfants, utilisez plutôt un tableau.

Est-ce que je ne l'applique pas correctement ?

Answer 1

Deux points ressortent :

1. Su getData ne renvoie jamais rien, donc sa promesse ( async qui renvoient toujours une promesse) seront remplies par les fonctions undefined s'il ne rejette pas

2. Le message d'erreur montre clairement que vous essayez d'effectuer un rendu direct de la promesse. getData plutôt que d'attendre qu'il se stabilise et de rendre la valeur d'accomplissement

Adresse 1 : getData devrait retourner le résultat de l'appel json :

async getData(){
   const res = await axios('/data');
   return await res.json();
}

Addressig #2 : Nous devrions voir plus de votre code, mais fondamentalement, vous ne pouvez pas faire

<SomeElement>{getData()}</SomeElement>

...car cela n'attend pas la résolution. Il faudrait plutôt utiliser getData pour définir l'état :

this.getData().then(data => this.setState({data}))
              .catch(err => { /*...handle the error...*/});

...et utiliser cet état lors du rendu :

<SomeElement>{this.state.data}</SomeElement>

---

Mise à jour : Maintenant que vous nous avez montré votre code, il faudrait faire quelque chose comme ceci :

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            this.getData().then(data => this.setState({data}))
                          .catch(err => { /*...handle the error...*/});
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

Nouvelle mise à jour : Vous avez indiqué votre préférence pour l'utilisation de await en componentDidMount plutôt que then y catch . Pour ce faire, vous devez imbriquer un async IIFE et s'assurer que cette fonction ne peut pas être lancée. ( componentDidMount elle-même ne peut pas être async rien ne pourra consommer cette promesse). Par exemple :

class App extends React.Component{
    async getData() {
        const res = await axios('/data');
        return await res.json(); // (Or whatever)
    }
    constructor(...args) {
        super(...args);
        this.state = {data: null};
    }
    componentDidMount() {
        if (!this.state.data) {
            (async () => {
                try {
                    this.setState({data: await this.getData()});
                } catch (e) {
                    //...handle the error...
                }
            })();
        }
    }
    render() {
        return (
            <div>
                {this.state.data ? <em>Loading...</em> : this.state.data}
            </div>
        );
    }
}

Answer 2

Au cours de mon expérience de ces derniers mois, j'ai réalisé que le meilleur moyen d'y parvenir est :

class App extends React.Component{
  constructor(){
   super();
   this.state = {
    serverResponse: ''
   }
  }
  componentDidMount(){
     this.getData();
  }
  async getData(){
   const res = await axios.get('url-to-get-the-data');
   const { data } = await res;
   this.setState({serverResponse: data})
 }
 render(){
  return(
     <div>
       {this.state.serverResponse}
     </div>
  );
 }
}

Si vous essayez de faire une demande de post sur des événements tels que le clic, alors appelez getData() sur l'événement et remplacer le contenu de celui-ci comme suit :

async getData(username, password){
 const res = await axios.post('url-to-post-the-data', {
   username,
   password
 });
 ...
}

De plus, si vous effectuez une demande lorsque le composant est sur le point d'être chargé, il suffit de remplacer async getData() con async componentDidMount() et changez la fonction de rendu comme suit :

render(){
 return (
  <div>{this.state.serverResponse}</div>
 )
}

Answer 3

Async/Await with axios 

  useEffect(() => {     
    const getData = async () => {  
      await axios.get('your_url')  
      .then(res => {  
        console.log(res)  
      })  
      .catch(err => {  
        console.log(err)  
      });  
    }  
    getData()  
  }, [])

Answer 4

const axios = require('axios').default;

const sendGetRequest = async () => {
    try {
        const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', {
            headers: {
                'authorization': 'Bearer YOUR_JWT_TOKEN_HERE'
            }
        });

        console.log(resp.data);
    } catch (err) {
        // Handle Error Here
        console.error(err);
    }
};

sendGetRequest();