Verwenden Sie Async/Await mit Axios in React.js

Folgend

Wie man async/await mit Axios in React verwendet

Ich versuche, mit Async/Await in einer React.js-App eine einfache Get-Anfrage an meinen Server zu stellen. Der Server lädt ein einfaches JSON unter /data was so aussieht

JSON

{
   id: 1,
   name: "Aditya"
}

Ich kann die Daten mit der einfachen jquery ajax get-Methode an meine React-App übertragen. Ich möchte jedoch die Axios-Bibliothek und Async/Await verwenden, um den ES7-Standards zu folgen. Mein aktueller Code sieht so aus:

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

Mit diesem Ansatz erhalte ich den folgenden Fehler:

Objekte sind als React-Kind nicht gültig (gefunden: [object Promise]). Wenn Sie eine Sammlung von untergeordneten Elementen rendern wollten, verwenden Sie stattdessen ein Array.

Implementiere ich es nicht richtig?

Zwei Probleme springen heraus:

1. Dein getData gibt nie etwas zurück, also sein Versprechen (async Funktionen geben immer ein Promise zurück) erfüllt werden undefined wenn es nicht ablehnt

2. Die Fehlermeldung zeigt deutlich, dass Sie versuchen, das Versprechen direkt zu machen getData zurückgibt, anstatt darauf zu warten, dass es sich begleicht, und dann den Erfüllungswert zu erbringen

Adressierung #1: getData sollte Rückkehr das Ergebnis des Anrufs json:

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

Adresse 2: Wir müssten mehr von Ihrem Code sehen, aber im Grunde können Sie das nicht

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

…denn das wartet nicht auf die Auflösung. Sie müssten stattdessen verwenden getData Zustand setzen:

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

… und diesen Zustand beim Rendern verwenden:

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

Aktualisieren: Jetzt, da Sie uns Ihren Code gezeigt haben, müssen Sie tun etwas wie Dies:

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

Weiteres Update: Sie haben eine Präferenz für die Verwendung angegeben await in componentDidMount statt then und catch. Sie würden das tun, indem Sie ein verschachteln async IIFE-Funktion darin und stellt sicher, dass die Funktion nicht werfen kann. (componentDidMount selbst kann nicht sein asyncnichts wird dieses Versprechen verbrauchen.) Bsp.:

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

Nach meiner Erfahrung in den letzten Monaten habe ich erkannt, dass der beste Weg, dies zu erreichen, folgender ist:

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

Wenn Sie versuchen, bei Ereignissen wie Klick eine Post-Anfrage zu stellen, dann rufen Sie an getData() Funktion für das Ereignis und ersetzen Sie den Inhalt wie folgt:

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

Wenn Sie eine Anfrage stellen, wenn die Komponente gerade geladen wird, ersetzen Sie sie einfach async getData() mit async componentDidMount() und ändern Sie die Renderfunktion wie folgt:

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