Schreiben Sie eine POST-Anforderung mit der Fetch-API in React

1. Schreiben Sie eine POST-Anfrage mit der Fetch-API in React
2. POST-Anforderung mit Fetch mit gesetzten HTTP-Headern
3. POST Request mit Fetch mit async/await in React
4. POST-Anfrage mit Fetch mit Fehlerbehandlung

Das Senden und Empfangen von Daten über API ist ein wesentliches Merkmal jeder komplexen Webanwendung.

React ist ein sehr beliebtes Framework zum Erstellen von Web-Apps. Wie andere JavaScript-basierte Frameworks ermöglicht es Entwicklern, die Fetch-API zu verwenden, um mit Servern zu kommunizieren.

Diese Anleitung zeigt, wie man eine POST-Anfrage in React schreibt.

Schreiben Sie eine POST-Anfrage mit der Fetch-API in React

Beim Erstellen einer React-Klassenkomponente müssen Sie eine HTTP-Anforderung in Lebenszyklusmethoden stellen. Normalerweise in der Methode componentDidMount().

Es gibt einen useEffect()-Hook für funktionale Klassenkomponenten, der Lebenszyklusmethoden ersetzt.

Die Struktur einer Fetch-Anfrage sieht wie folgt aus: fetch(endpointURL, requestOptions).

Schauen wir uns zum besseren Verständnis eine tatsächliche funktionale Komponente in React an.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    fetch(url, options);
  }, []);
  return <div className="App"></div>;
}

Live-Demo auf CodeSandbox.

In diesem Beispiel stellen wir eine Anfrage mit dem Hook useEffect(). Das erste Argument für den Hook ist eine Callback-Funktion, bei der wir die Methode fetch verwenden, um die Anfrage zu stellen.

Die Variable url enthält die URL des API-Endpunkts, an den wir Daten POSTEN möchten.

Die Variable options enthält ein options-Objekt, das eine wesentliche Komponente für eine POST-Anfrage ist. Es hat drei Eigenschaften: method, headers, body.

Der Wert der Eigenschaft method gibt die Art der auszuführenden Aktion an. In diesem Fall ist das 'POST', das den Server anweist, einen neuen Datensatz zu erstellen.

Es kann auch diese Werte haben: 'GET', 'PUT', 'PATCH', 'DELETE'.

Über die Eigenschaft headers wird festgelegt, wie mit den Daten umgegangen werden soll.

Die Eigenschaft body schließlich enthält die Daten, die an den Server auf der anderen Seite des API-Endpunkts übertragen werden müssen.

POST-Anforderung mit Fetch mit gesetzten HTTP-Headern

Wie bereits erwähnt, bezieht sich die Eigenschaft Header auf den Zweck der Daten und darauf, wie die empfangende Anwendung damit umgehen soll.

In unserem Beispiel setzen wir den Wert 'application-json', der angibt, dass die Daten als JSON geparst werden sollen.

POST Request mit Fetch mit async/await in React

Anstatt die then()-Methode zu verwenden, um Promises zu verketten, verwenden viele Entwickler eine sauberere async/await-Syntax. Schauen wir uns das Beispiel an.

export default function App() {
  const url = "www.somewebsite.com";
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Irakli Tchigladze" })
  };
  useEffect(() => {
    const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (e) {
        return e;
    }
    }
    getData()
  }, []);
  return <div className="App"></div>;
}

In diesem Beispiel haben wir die gleichen url und options, aber wir ersetzen then() und verkettete Promises durch die Schlüsselwörter async und await.

Um Versprechungsketten durch das Schlüsselwort await zu ersetzen, müssen wir das Schlüsselwort async in der Funktionsdefinition verwenden.

Beachten Sie, dass wir das Schlüsselwort async nicht direkt mit der Callback-Funktion verwenden können, die das erste Argument für den Hook useEffect() ist. Stattdessen definieren wir innerhalb des Callbacks eine neue Funktion getData und rufen diese am Ende der Funktion auf.

POST-Anfrage mit Fetch mit Fehlerbehandlung

Viele Entwickler machen einen häufigen Fehler, wenn sie versuchen, eine POST-Anfrage zu stellen. Der Fehler besteht darin, den falschen Wert für den Parameter body im Objekt options anzugeben.

Der Parameter body übernimmt ein JavaScript-Objekt mit eigenen Schlüssel-Wert-Paaren. Oft erhalten Entwickler eine Fehlermeldung, weil sie ein rohes JavaScript-Objekt übergeben.

Wenn Sie sich in einer ähnlichen Situation befinden und immer wieder einen Fehler erhalten, versuchen Sie, Rohdaten als Argument an die Methode JSON.stringify() zu übergeben.

Der einfachste Weg, eine Fehlerbehandlung bei einer POST-Anfrage zu implementieren, ist die Verwendung der try...catch-Anweisung. Schauen wir uns die Funktion getData aus dem obigen Beispiel an.

const getData = async () => {
       try {
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
    } catch (error) {
        return error;
    }

Der Funktionskörper enthält zwei Codeblöcke – einen unter der Anweisung try und den anderen unter catch.

Zuerst versuchen wir, die Anfrage zu stellen und Daten zurückzugeben. Wenn aus irgendeinem Grund ein Fehler auftritt und die Anfrage nicht erfolgreich ist, führt JavaScript den Code im catch-Block aus.

Die catch-Anweisung nimmt ein Argument, einen Variablennamen, der für die Ursache des Fehlschlagens der Anfrage steht. Wir können diesen Wert zurückgeben und untersuchen, was schief gelaufen ist.

Viele Entwickler protokollieren diese Variable in der Konsole.