Utilisation d'Axios dans React : Exemples de requêtes GET et POST

Axios est un client HTTP basé sur les promesses qui simplifie les requêtes HTTP dans les applications React. Il rationalise des tâches telles que la récupération de données à partir d’API et l’envoi de données à des serveurs. Dans ce guide, nous explorerons comment utiliser Axios dans React avec des exemples pratiques de requêtes GET et POST.

Configuration d’Axios dans React

Pour commencer avec Axios dans votre projet React :

1. Installez Axios :

   npm install axios
   

2. Importez Axios dans votre composant :

   import axios from 'axios';
   

Effectuer des requêtes GET

Une requête GET récupère des données à partir d’un point de terminaison spécifié. Voici comment effectuer une requête GET en utilisant Axios dans un composant React :

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetchingComponent;

Explication :

• Initialisation de l’état : useState initialise data comme un tableau vide.
• Récupération des données : axios.get récupère les données à partir du point de terminaison de l’API.
• Hook d’effet : useEffect garantit que la requête GET s’exécute une fois après le montage du composant.
• Gestion des erreurs : Les erreurs sont interceptées et enregistrées dans la console.

Effectuer des requêtes POST

Une requête POST envoie des données à un serveur pour créer une nouvelle ressource. Voici comment effectuer une requête POST en utilisant Axios dans un composant React :

import React, { useState } from 'react';
import axios from 'axios';

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Post created:', response.data);
      })
      .catch(error => {
        console.error('Error creating post:', error);
      });
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Body:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Submit</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

Explication :

• Initialisation de l’état : useState initialise title et body comme des chaînes vides.
• Gestion du formulaire : Le formulaire capture les entrées de l’utilisateur pour le titre et le corps du post.
• Fonction de soumission : handleSubmit empêche le comportement de soumission par défaut du formulaire, construit un objet post et l’envoie en utilisant axios.post.
• Gestion des erreurs : Les erreurs sont interceptées et enregistrées dans la console.

FAQ

Conclusion

Axios est un outil puissant pour gérer les requêtes HTTP dans les applications React. En comprenant comment effectuer des requêtes GET et POST, vous pouvez interagir efficacement avec les API et gérer les données au sein de vos composants React.