Comment utiliser Axios dans ReactJS – Requête GET et POST

Comment utiliser Axios dans ReactJS

Introduction

Axios est une bibliothèque populaire pour effectuer des requêtes HTTP telles que GET, POST, PUT, DELETE et autres. Axios est très approprié pour une utilisation dans les applications React car il fournit une syntaxe simple et prend en charge les promesses. Cet article expliquera comment utiliser Axios dans une application ReactJS.

Installation d'Axios
Assurez-vous qu'Axios est installé dans votre projet React :

npm install axios

Utilisation d'Axios dans les composants React
Par exemple, nous souhaitons récupérer des données d'une API à l'aide de la méthode GET et les afficher dans un composant React.

1. OBTENIR Demande :

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

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

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

export default App;

Explication :

• Utilisez useEffect pour appeler la fonction fetchData lors du premier chargement du composant.
  • axios.get est utilisé pour récupérer les données de l'URL de l'API.
  • Les données d'état, le chargement et les erreurs sont utilisées pour stocker les données récupérées, l'état de chargement et les erreurs.

---

1. Demande POST : Pour envoyer des données au serveur, vous pouvez utiliser la méthode POST comme suit :

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

const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
        title,
        body,
      });
      console.log('Response:', response.data);
      alert('Post successfully created!');
    } catch (error) {
      console.error('Error posting data:', error);
    }
  };

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

export default App;

Explication :

• La méthode axios.post est utilisée pour envoyer les données de titre et de corps à l'API.
• La fonction handleSubmit gère la soumission du formulaire et envoie les données au serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!