POST HTTP-verzoek in Reageren

Introductie

Bij het werken met API's willen we vaak gegevens naar de server sturen voor verwerking. Als we bijvoorbeeld een lijst met taken hebben en hieraan willen toevoegen, bijvoorbeeld door een formulier in te dienen, gebruiken we POST HTTP-verzoeken om een ​​verzoek te verzenden met een payload voor verwerking en mogelijke persistentie.

In dit artikel leren we hoe je POST HTTP-verzoeken in React uitvoert met behulp van twee gangbare benaderingen: de Fetch API en Axios. We zullen ook leren hoe dit te doen in functionele en op klassen gebaseerde componenten.

Met behulp van de Fetch API is het verzenden van een POST HTTP-verzoek met React net zo eenvoudig als:

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 biedt ons een elegant alternatief om HTTP POST-verzoeken te verzenden:

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

Als je meer wilt weten over deze benaderingen en hoe ze werken, lees dan de rest van de gids!

Wat is een POST HTTP-verzoek?

Zoals de naam al aangeeft, worden POST-verzoeken gebruikt om gegevens naar een eindpunt te posten, dat deze vervolgens doorgaans verwerkt en opslaat in een database. Deze gegevens kunnen afkomstig zijn van een formulier, worden opgeslagen in een object of op een andere manier worden verkregen, maar worden meestal omgezet in een JSON-representatie die de REST API kan gebruiken.

Het verzenden van HTTP-verzoeken met een werkwoord wordt eenvoudig gemaakt door de Fetch API (ingebouwd) en bibliotheken zoals Axios. De Fetch API is een ingebouwde browsermethode voor het uitvoeren van HTTP-verzoeken, terwijl Axios een extern pakket is dat we in ons project moeten installeren voordat we het kunnen gebruiken.

De keuze hiertussen is aan jou. De Fetch API is uitgebreider en werkt niet met asynchrone verzoeken, maar Axios is een externe afhankelijkheid. Toch werken velen liever met Axios dan met de Fetch API. We zullen beide behandelen.

Beide methoden hebben voor- en nadelen, maar het is belangrijk op te merken dat ze de standaard HTTP-werkwoorden aankunnen: POST, GET, PUT, PATCH, DELETE.

In ons geval werken we aan een lijst met berichten die we al hebben opgehaald uit een nep-API. We zullen een formulier maken dat de titel en hoofdtekst van een nieuw bericht bevat, en zodra het is ingediend, stuurt het een POST-verzoek naar de nepserver voor verwerking:

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;

Laten we het formulier nu functioneel maken, zodat we gegevens kunnen toevoegen aan de berichtenlijsten op onze website zodra het formulier is verzonden.

Hoe een POST HTTP-verzoek in de functionele component van React uit te voeren?

We kunnen nu HTTP-verzoeken uitvoeren in functionele componenten dankzij de introductie van hooks in React. Voorheen werden functionele componenten alleen gebruikt voor het renderen van de gebruikersinterface.

Een functionele component wordt gemaakt wanneer een JavaScript-functie (standaard of ES6) een React-element (JSX) retourneert.

In plaats van het state-object in de constructormethode te gebruiken zoals bij op klassen gebaseerde componenten, gebruiken we nu React-haken zoals: useState() om onze gegevens op te slaan voordat ze worden doorgegeven aan de oorspronkelijke gegevens.

Hoe POST HTTP-verzoek uit te voeren in de functionele component van React met Fetch API

Omdat de Fetch API een ingebouwde browsermethode is die a Promise, wij gebruiken de .then() en .catch() methoden om met succes en falen om te gaan. Het accepteert ook een verplicht argument, namelijk de URL van de resource/API waarin we gegevens willen POST, evenals een argument dat het HTTP-verzoek aangeeft, wat in ons geval is 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;

In de bovenstaande code hebben we een methode gemaakt die we aan het formulier zullen koppelen, zodat het wordt geactiveerd wanneer op de verzendknop van het formulier wordt geklikt. We zijn begonnen met het gebruik van e.preventDefault() om te voorkomen dat de pagina opnieuw wordt geladen bij het verzenden van het formulier, wat: doorgaans wat je wilt dat er gebeurt, maar werkt niet zo goed voor onze demo:

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

Kijkend naar de fetch() call, hebben we de URL toegevoegd als de eerste verplichte parameter, en de tweede parameter neemt de aanvraagmethode (POST), de bodyEn header:

• body – bevat de gegevens die we naar het API-eindpunt willen sturen, wat we moeten vastzetten, waardoor het een op tekst gebaseerde JSON-representatie wordt.
• header – specificeert het inhoudstype, wat in ons geval is application/json, aangezien onze payload wordt weergegeven als een JSON-tekenreeks:

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

Ten slotte, omdat deze methode a . retourneert Promise, we halen de JSON-inhoud eruit (reactie van de server), bijgewerkt de posts staat om de nieuwe gegevens op te nemen.

Om fouten af ​​te handelen, gebruikten we ook de .catch() methode:

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

Hoe POST HTTP-verzoek uit te voeren in de functionele component van React met Axios

In de vorige sectie hebben we uitgelegd hoe u POST-verzoeken kunt uitvoeren met de Fetch-API. Laten we nu de aanpassen handleSubmit() methode en voer in plaats daarvan POST-verzoeken uit met Axios.

Axios is een HTTP-clientbibliotheek die beloften gebruikt om het verzenden gemakkelijk te maken asynchrone HTTP-verzoeken naar REST-eindpunten. Omdat het een externe bibliotheek is, moeten we deze eerst in ons project installeren door de volgende opdracht uit te voeren in de map van ons project:

$ npm install axios

Zodra we Axios met succes hebben geïnstalleerd, kunnen we doorgaan met het uitvoeren van ons POST-verzoek:

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

Als we naar de bovenstaande code kijken, is het veel eenvoudiger en vereist het minder syntaxis dan de Fetch API, omdat we niet langer naar JSON hoeven te converteren, met headers hoeven te werken en zelfs onze gegevens moeten stringen. Deze boilerplate wordt weggeabstraheerd door Axios.

Hoe POST HTTP-verzoek in React's Class Component uit te voeren?

POST-verzoeken in klassecomponenten worden anders afgehandeld dan in functionele componenten, omdat we niet langer React-haken gebruiken en in plaats daarvan de state voorwerp.

Een klassecomponent is een ES6-klasse die JSX retourneert en React-extensies vereist.

Hoe POST HTTP-verzoek in React's Class Component uit te voeren met Fetch API

De aanvraag lijkt sterk op die van functionele componenten. De enige gebieden waar we enkele verschillen zouden vinden, zijn bij het opslaan van gegevens in: state en bij gebruik state waarden omdat we de niet meer gebruiken useState() haak:

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;

Deze keer declareren we geen methoden meer met de const trefwoord. Voeg ze in plaats daarvan toe met this. Deze methode wordt geactiveerd wanneer op de verzendknop van het formulier wordt geklikt. Omdat het een formulier is, zijn we begonnen met het gebruik van e.preventDefault() om te voorkomen dat de pagina opnieuw wordt geladen wanneer het formulier wordt verzonden:

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

Net zoals we eerder hebben geleerd, neemt de Fetch API twee parameters op. Een daarvan is de URL, terwijl de tweede opties bevat zoals de aanvraagmethode (POST), body, wat de informatie is die we plaatsen (moet worden gestringenteerd), en dan de 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',
      },
   })
};

Wetende dat dit een belofte is, kunnen we nu de .then() methode om met succes om te gaan en de .catch() methode om een ​​situatie af te handelen als er een fout of storing is in het HTTP-verzoek.

Hoe POST HTTP-verzoek uit te voeren in React's Class Component met Axios

We hebben gezien hoe te presteren POST HTTP-verzoeken in op klassen gebaseerde componenten. Dit lijkt erg op Axios, omdat we alleen Axios hoeven te installeren en vervolgens de handleSubmit() methode, dus we gebruiken nu Axios in plaats van 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));
};

Conclusie

In deze handleiding hebben we geleerd hoe we de twee primaire methoden in React kunnen gebruiken om POST HTTP-verzoeken uit te voeren. We hebben ook gezien hoe ze kunnen worden gedaan in zowel functionele als op klassen gebaseerde componenten, dus dit artikel kan ons van dienst zijn, ongeacht wat er in ons project wordt gebruikt.