POST-HTTP-Anfrage in React

Einleitung

Bei der Arbeit mit APIs möchten wir häufig Daten zur Verarbeitung an den Server senden. Wenn wir zum Beispiel eine Liste mit Aufgaben haben und diese ergänzen möchten, vielleicht durch eine Formularübermittlung, verwenden wir POST-HTTP-Anfragen, um eine Anfrage mit einer Nutzlast zur Verarbeitung und potenziellen Persistenz zu senden.

In diesem Artikel lernen wir, wie man POST-HTTP-Anforderungen in React mit zwei gängigen Ansätzen ausführt: der Fetch-API und Axios. Wie das geht, lernen wir auch in funktionalen und klassenbasierten Komponenten kennen.

Mit der Fetch-API ist das Senden einer POST-HTTP-Anfrage mit React so einfach wie:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios bietet uns eine elegante Alternative zum Senden von HTTP-POST-Anforderungen:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

Wenn Sie mehr über diese Ansätze und ihre Funktionsweise erfahren möchten, lesen Sie bitte den Rest des Leitfadens!

Was ist eine POST-HTTP-Anfrage?

Wie der Name schon sagt, werden POST-Anforderungen verwendet, um Daten an einen Endpunkt zu senden – der sie dann normalerweise verarbeitet und in einer Datenbank speichert. Diese Daten können aus einem Formular stammen, in einem Objekt gespeichert oder auf andere Weise abgerufen werden – sie werden jedoch normalerweise in eine JSON-Darstellung konvertiert, die von der REST-API verwendet werden kann.

Das Senden von HTTP-Anforderungen mit einem beliebigen Verb wird durch die vereinfacht Fetch API (integriert) und Bibliotheken wie z Axios. Die Fetch-API ist eine integrierte Browsermethode zum Ausführen von HTTP-Anforderungen, während Axios ein externes Paket ist, das wir vor der Verwendung in unserem Projekt installieren müssen.

Die Wahl zwischen diesen liegt bei Ihnen. Die Fetch-API ist ausführlicher und funktioniert nicht mit asynchronen Anforderungen, aber Axios ist eine externe Abhängigkeit. Trotzdem arbeiten viele lieber mit Axios als mit der Fetch-API. Wir decken beides ab.

Beide Methoden haben Vor- und Nachteile, aber es ist wichtig zu beachten, dass sie die Standard-HTTP-Verben verarbeiten können – POST, GET, PUT, PATCH, DELETE.

In unserem Beispiel bearbeiten wir eine Liste von Beiträgen, die wir bereits von einer Schein-API abgerufen haben. Wir erstellen ein Formular, das den Titel und den Text eines neuen Beitrags übernimmt und nach dem Absenden eine POST-Anforderung zur Verarbeitung an den Mock-Server sendet:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

Lassen Sie uns nun das Formular funktionsfähig machen, damit wir Daten zu den Postlisten auf unserer Website hinzufügen können, sobald das Formular gesendet wurde.

So führen Sie eine POST-HTTP-Anforderung in der Funktionskomponente von React durch

Dank der Einführung von Hooks in React können wir jetzt HTTP-Anforderungen in funktionalen Komponenten ausführen. Bisher wurden funktionale Komponenten nur zum Rendern der Benutzeroberfläche verwendet.

Eine funktionale Komponente wird erstellt, wenn eine JavaScript-Funktion (entweder Standard oder ES6) ein React-Element (JSX) zurückgibt.

Anstatt wie bei klassenbasierten Komponenten das Zustandsobjekt in der Konstruktormethode zu verwenden, verwenden wir jetzt React-Hooks wie z useState() unsere Daten zu speichern, bevor sie an die ursprünglichen Daten weitergegeben werden.

So führen Sie eine POST-HTTP-Anforderung in der Funktionskomponente von React mit der Fetch-API aus

Da die Fetch-API eine integrierte Browsermethode ist, die eine zurückgibt Promise, wir nehmen das .then() und .catch() Methoden zum Umgang mit Erfolg und Misserfolg. Es akzeptiert auch ein obligatorisches Argument, bei dem es sich um die URL der Ressource/API handelt, in die wir Daten senden möchten, sowie ein Argument, das die HTTP-Anforderung angibt, was in unserem Fall der Fall ist POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

Im obigen Code haben wir eine Methode erstellt, die wir mit dem Formular verknüpfen, sodass sie ausgelöst wird, wenn auf die Schaltfläche „Senden“ des Formulars geklickt wird. Wir begannen mit der Verwendung e.preventDefault() um zu verhindern, dass die Seite beim Absenden des Formulars neu geladen wird, d.h gewöhnlich Was Sie möchten, funktioniert aber nicht so gut für unsere Demo:

const handleSubmit = (e) => {
   e.preventDefault();
};

Mit Blick auf die fetch() aufrufen, haben wir die URL als ersten obligatorischen Parameter hinzugefügt, und der zweite Parameter übernimmt die Anforderungsmethode (POST), die bodyund der header:

• body – enthält die Daten, die wir an den API-Endpunkt senden möchten, was wir müssen stringifizieren, wodurch es in eine textbasierte JSON-Darstellung umgewandelt wird.
• header – gibt den Inhaltstyp an, der in unserem Fall ist application/json, da unsere Payload als JSON-String dargestellt wird:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Schließlich, weil diese Methode a zurückgibt Promise, wir extrahieren den JSON-Inhalt daraus (Antwort des Servers), aktualisiert die posts Zustand, um die neuen Daten aufzunehmen.

Um Fehler zu behandeln, haben wir auch die verwendet .catch() Verfahren:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

So führen Sie eine POST-HTTP-Anfrage in der Funktionskomponente von React mit Axios durch

Wir haben im vorherigen Abschnitt erklärt, wie POST-Anforderungen mit der Fetch-API ausgeführt werden. Lassen Sie uns nun die ändern handleSubmit() -Methode und führen Sie stattdessen POST-Anforderungen mit Axios aus.

Axios ist eine HTTP-Client-Bibliothek, die Versprechungen verwendet, um das Senden zu vereinfachen asynchrone HTTP-Anfragen zu REST-Endpunkten. Da es sich um eine externe Bibliothek handelt, müssen wir sie zuerst in unserem Projekt installieren, indem wir den folgenden Befehl im Verzeichnis unseres Projekts ausführen:

$ npm install axios

Sobald wir Axios erfolgreich installiert haben, können wir mit der Ausführung unserer POST-Anfrage fortfahren:

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Wenn Sie sich den obigen Code ansehen, ist er viel einfacher und erfordert weniger Syntax als die Fetch-API, da wir nicht mehr in JSON konvertieren, mit Headern arbeiten und sogar unsere Daten stringifizieren müssen. Diese Boilerplate wird von Axios abstrahiert.

So führen Sie eine POST-HTTP-Anfrage in der Klassenkomponente von React durch

POST-Anforderungen in Klassenkomponenten werden anders behandelt als in Funktionskomponenten, da wir keine React-Hooks mehr verwenden und stattdessen die verwenden state Objekt.

Eine Klassenkomponente ist eine ES6-Klasse, die JSX zurückgibt und React-Erweiterungen erfordert.

So führen Sie eine POST-HTTP-Anforderung in der Klassenkomponente von React mit der Fetch-API aus

Die Anforderung ist der von funktionalen Komponenten sehr ähnlich. Die einzigen Bereiche, in denen wir einige Unterschiede feststellen würden, sind die Speicherung von Daten state und bei der Verwendung state Werte, weil wir die nicht mehr verwenden useState() Haken:

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

Dieses Mal deklarieren wir keine Methoden mehr mit dem const Stichwort. Stellen Sie ihnen stattdessen voran this. Diese Methode wird ausgelöst, wenn auf die Senden-Schaltfläche des Formulars geklickt wird. Da es sich um ein Formular handelt, haben wir mit der Verwendung begonnen e.preventDefault() um zu verhindern, dass die Seite beim Absenden des Formulars neu geladen wird:

handleSubmit = (e) => {
   e.preventDefault();
};

Wie wir bereits gelernt haben, übernimmt die Fetch-API zwei Parameter. Einer ist die URL, während der zweite Optionen wie die Anfragemethode (POST), body, das sind die Informationen, die wir posten (muss gestringt werden), und dann die headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Da wir wissen, dass dies ein Versprechen ist, können wir es jetzt anhängen .then() Methode zum Umgang mit Erfolg und die .catch() -Methode, um eine Situation zu behandeln, wenn ein Fehler oder Fehler in der HTTP-Anforderung auftritt.

So führen Sie eine POST-HTTP-Anforderung in der Klassenkomponente von React mit Axios aus

Wir haben gesehen, wie man performt POST HTTP-Anforderungen in klassenbasierten Komponenten. Dies ist Axios sehr ähnlich, da wir lediglich Axios installieren und dann ersetzen müssen handleSubmit() -Methode, daher verwenden wir jetzt Axios anstelle der Fetch-API:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

Zusammenfassung

In diesem Handbuch haben wir gelernt, wie man die beiden primären Methoden in React verwendet, um POST-HTTP-Anforderungen auszuführen. Wir haben auch gesehen, wie sie sowohl in funktionalen als auch in klassenbasierten Komponenten ausgeführt werden können, sodass dieser Artikel uns unabhängig davon dienen kann, was in unserem Projekt verwendet wird.