Versprechen in Reactjs werden häufig verwendet, um asynchrone Operationen zu behandeln, wie z.B. das Abrufen von Daten von einem API-Endpunkt. Hier sind grundlegende Schritte, die helfen, zu verstehen, wie man Versprechen in Reactjs verwenden kann.
1. Importieren und Initialisieren Sie Ihr React-Paket.
```javascript import React from ‘react’; ```2. In Ihrer React-Komponente definieren Sie eine Methode, die ein Versprechen darstellt. Sie können die eingebaute fetch-Methode verwenden, um ein Versprechen darzustellen, das Daten von einem Endpunkt abruft.
```javascript fetchUserData() { fetch(‘https://api.example.com/user’) .then(response => response.json()) .then(data => this.setState({ user: data })); } ```In diesem Code wird die fetch-Methode verwendet, um Daten von ‘https://api.example.com/user’ abzurufen. Die fetch-Methode gibt ein Versprechen zurück, das sich in einen Response-Stream umwandelt, wenn es gelöst ist.
Die .then Methode wird ausgeführt, wenn das Versprechen erfüllt wird. Es nimmt die Antwort und wandelt sie in JSON um.
Die zweite .then-Methode wird ausgeführt, wenn das vorherige Versprechen gelöst ist (d.h., wenn die Daten in JSON umgewandelt sind). Es nimmt die Daten und setzt den Status der Komponente auf die abgerufenen Daten.
3. Verwenden Sie die componentDidMount() Lebenszyklus-Methode, um die fetchData() Methode aufzurufen, wenn Ihre Komponente zuerst in das DOM eingefügt wird.
```javascript componentDidMount() { this.fetchUserData(); } ```4. In der Render-Methode können Sie die Daten anzeigen, die Sie von Ihrem API-Endpunkt abgerufen haben.
```javascript
render() {
return (
In dieser Render-Methode wird überprüft, ob this.state.user existiert, und wenn ja, wird ein Begrüßungs-Nachricht mit dem Namen des Benutzers angezeigt.
Denken Sie daran, dass Versprechen asynchrone Operationen repräsentieren, die möglicherweise noch nicht abgeschlossen sind. Es ist üblich, einen Ladezustand in Ihrer Komponente zu haben, um dem Benutzer anzuzeigen, dass Daten geladen werden.
