Requête POST HTTP en réaction

Introduction

Lorsque nous travaillons avec des API, nous voulons souvent envoyer des données au serveur pour traitement. Par exemple, si nous avons une liste de tâches et que nous voulons y ajouter, peut-être via une soumission de formulaire, nous utilisons les requêtes HTTP POST pour envoyer une requête avec une charge utile pour le traitement et la persistance potentielle.

Dans cet article, nous allons apprendre à effectuer des requêtes HTTP POST dans React en utilisant deux approches courantes : l'API Fetch et Axios. Nous apprendrons également comment faire cela dans les composants fonctionnels et basés sur les classes.

En utilisant l'API Fetch, envoyer une requête HTTP POST avec React est aussi simple que :

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 nous offre une alternative élégante pour envoyer des requêtes HTTP POST :

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

Si vous souhaitez en savoir plus sur ces approches et leur fonctionnement, veuillez lire le reste du guide !

Qu'est-ce qu'une requête HTTP POST ?

Comme son nom l'indique, les requêtes POST sont utilisées pour publier des données sur un point de terminaison, qui les traite ensuite généralement et les enregistre dans une base de données. Ces données peuvent provenir d'un formulaire, être enregistrées dans un objet ou être obtenues d'une autre manière, mais elles sont généralement converties en une représentation JSON à utiliser par l'API REST.

L'envoi de requêtes HTTP avec n'importe quel verbe est simplifié par le Fetch API (intégré) et des bibliothèques telles que Axios. L'API Fetch est une méthode de navigateur intégrée pour effectuer des requêtes HTTP, tandis qu'Axios est un package externe que nous devons installer dans notre projet avant de l'utiliser.

Le choix entre ceux-ci dépend de vous. L'API Fetch est plus détaillée et ne fonctionne pas avec les requêtes asynchrones, mais Axios est une dépendance externe. Même ainsi, beaucoup préfèrent travailler avec Axios plutôt que l'API Fetch. Nous couvrirons les deux.

Les deux méthodes ont des avantages et des inconvénients, mais il est important de noter qu'elles peuvent gérer les verbes HTTP standard - POST, GET, PUT, PATCH, DELETE.

Dans notre exemple, nous allons travailler une liste de messages que nous avons déjà extraits d'une API fictive. Nous allons créer un formulaire qui prend le titre et le corps d'un nouveau message et, une fois soumis, envoie une requête POST au serveur fictif pour traitement :

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;

Rendons maintenant le formulaire fonctionnel afin que nous puissions ajouter des données aux listes de publications sur notre site Web une fois le formulaire soumis.

Comment effectuer une requête HTTP POST dans le composant fonctionnel de React

Nous pouvons désormais effectuer des requêtes HTTP dans des composants fonctionnels grâce à l'introduction de crochets dans React. Auparavant, les composants fonctionnels n'étaient utilisés que pour le rendu de l'interface utilisateur.

Un composant fonctionnel est créé lorsqu'une fonction JavaScript (standard ou ES6) renvoie un élément React (JSX).

Plutôt que d'utiliser l'objet d'état dans la méthode du constructeur comme avec les composants basés sur la classe, nous utilisons maintenant des crochets React tels que useState() pour stocker nos données avant de les transmettre dans les données d'origine.

Comment effectuer une requête HTTP POST dans le composant fonctionnel de React avec l'API Fetch

Étant donné que l'API Fetch est une méthode de navigateur intégrée qui renvoie un Promise, nous utilisons le .then() ainsi que .catch() méthodes pour gérer le succès et l'échec. Il accepte également un argument obligatoire, qui est l'URL de la ressource/API dans laquelle nous voulons POSTer des données, ainsi qu'un argument indiquant la requête HTTP, qui dans notre cas est 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;

Dans le code ci-dessus, nous avons créé une méthode que nous allons lier au formulaire afin qu'elle soit déclenchée lorsque le bouton d'envoi du formulaire est cliqué. Nous avons commencé par utiliser e.preventDefault() pour empêcher le rechargement de la page lors de la soumission du formulaire, ce qui est d'habitude ce que vous voulez qu'il se passe, mais ne fonctionne pas aussi bien pour notre démo :

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

En regardant le fetch() appel, nous avons ajouté l'URL comme premier paramètre obligatoire, et le deuxième paramètre prend en compte la méthode de requête (POST), le bodyainsi que, header:

• body – contient les données que nous voulons envoyer au point de terminaison API, que nous devons stringifier, en le transformant en une représentation JSON textuelle.
• header – spécifie le type de contenu, qui dans notre cas est application/json, puisque notre charge utile est représentée sous la forme d'une chaîne JSON :

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

Enfin, parce que cette méthode retourne un Promise, nous en extrairons le contenu JSON (réponse du serveur), mis à jour le posts État pour inclure les nouvelles données.

Pour gérer les erreurs, nous avons également utilisé le .catch() méthode:

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

Comment effectuer une requête HTTP POST dans le composant fonctionnel de React avec Axios

Nous avons expliqué comment effectuer des requêtes POST avec l'API Fetch dans la section précédente. Maintenant, modifions le handleSubmit() méthode et effectuer des requêtes POST avec Axios à la place.

Axios est une bibliothèque client HTTP qui utilise des promesses pour faciliter l'envoi requêtes HTTP asynchrones aux terminaux REST. Comme il s'agit d'une bibliothèque externe, nous devons d'abord l'installer dans notre projet en exécutant la commande suivante dans le répertoire de notre projet :

$ npm install axios

Une fois que nous avons installé Axios avec succès, nous pouvons procéder à l'exécution de notre requête POST :

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

En regardant le code ci-dessus, c'est beaucoup plus facile et nécessite moins de syntaxe que l'API Fetch, car nous n'avons plus besoin de convertir en JSON, de travailler avec des en-têtes et même de chaîner nos données. Ce passe-partout est extrait par Axios.

Comment effectuer une requête HTTP POST dans le composant de classe de React

Les requêtes POST dans les composants de classe sont traitées différemment que dans les composants fonctionnels car nous n'utilisons plus les crochets React et utilisons à la place le state objet.

Un composant de classe est une classe ES6 qui renvoie JSX et nécessite des extensions React.

Comment effectuer une requête HTTP POST dans le composant de classe de React avec l'API Fetch

La demande est très similaire à celle des composants fonctionnels. Les seuls domaines dans lesquels nous trouverions des différences sont lors du stockage des données dans state et lors de l'utilisation state valeurs parce que nous n'utilisons plus le useState() accrocher:

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;

Cette fois, nous ne déclarons plus les méthodes avec le const mot-clé. Au lieu de cela, préfixez-les avec this. Cette méthode sera déclenchée lorsque le bouton d'envoi du formulaire sera cliqué. Comme il s'agit d'un formulaire, nous avons commencé par utiliser e.preventDefault() pour empêcher le rechargement de la page lors de la soumission du formulaire :

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

Tout comme nous l'avons appris précédemment, l'API Fetch prend en compte deux paramètres. L'un est l'URL, tandis que le second contient des options comme la méthode de requête (POST), body, qui est l'information que nous publions (doit être stringifiée), puis le 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',
      },
   })
};

Sachant qu'il s'agit d'une promesse, nous pouvons maintenant joindre le .then() méthode pour gérer le succès et la .catch() méthode pour gérer une situation en cas d'erreur ou d'échec dans la requête HTTP.

Comment effectuer une requête HTTP POST dans le composant de classe de React avec Axios

Nous avons vu comment effectuer POST Requêtes HTTP dans les composants basés sur des classes. Ceci est très similaire à Axios, car tout ce que nous avons à faire est d'installer Axios, puis de remplacer le handleSubmit() , nous utilisons donc maintenant Axios plutôt que l'API Fetch :

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

Conclusion

Dans ce guide, nous avons appris à utiliser les deux méthodes principales de React pour effectuer des requêtes HTTP POST. Nous avons également vu comment ils pouvaient être réalisés à la fois dans des composants fonctionnels et basés sur des classes, donc cet article peut nous servir indépendamment de ce qui est utilisé dans notre projet.