Comment intégrer les API REST dans React avec fetch et Axios

Intégration de l'API REST dans React

L'intégration des API REST dans une application React est une tâche courante pour les développeurs Web. REST (Representational State Transfer) est un style architectural qui vous permet d'interagir avec des ressources externes (données) via des méthodes HTTP telles que GET, POST, PUT, DELETE, etc. React facilite l'intégration avec les API REST, vous permettant de récupérer des données. , publiez de nouvelles données et gérez efficacement diverses réponses d'API.

Dans ce guide, nous explorerons comment intégrer les API REST dans une application React en utilisant différentes méthodes telles que l'API Fetch, Axios et la gestion de la récupération de données asynchrone.

1. Récupérer des données à partir d'une API REST

La fonction fetch() est intégrée à JavaScript et fournit un moyen simple d'effectuer des requêtes HTTP. Il renvoie une promesse qui se résout en l'objet Response représentant la réponse à la demande.

Utilisation de l'API fetch dans React

Voici un exemple simple utilisant l'API fetch pour obtenir des données d'une API REST et les afficher dans un composant React.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

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

export default FetchPosts;

• useState : utilisé pour stocker les publications, l'état de chargement et les éventuels messages d'erreur.
• useEffect : gère la récupération des données lorsque le composant est monté.
• fetch() : récupère les données du point de terminaison de l'API REST, puis les traite au format JSON.
• Gestion des erreurs : détecte toutes les erreurs (comme les problèmes de réseau) et définit l'état de l'erreur.

2. Utiliser Axios pour les requêtes API

Axios est un client HTTP basé sur des promesses pour le navigateur et Node.js. Il s'agit d'une alternative à la récupération et est souvent préférée pour sa syntaxe plus claire et ses fonctionnalités supplémentaires telles que la transformation JSON automatique, l'annulation des demandes, etc.

Installation d'Axios

Pour utiliser Axios, installez-le d'abord via npm :

npm install axios

Utiliser Axios pour récupérer des données

Voici le même exemple que ci-dessus mais avec Axios.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API using Axios
    axios
      .get(API_URL)
      .then((response) => {
        setPosts(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

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

export default FetchPosts;

• axios.get() : récupère les données de l'API REST. Axios analyse automatiquement la réponse au format JSON.
• Gestion des erreurs : s'il y a une erreur, elle est détectée et affichée dans le composant.

3. Envoi de données à une API REST (requêtes POST)

En plus des requêtes GET, vous pouvez envoyer des données à un serveur à l'aide de requêtes POST. Ceci est couramment utilisé pour soumettre des formulaires ou créer de nouveaux enregistrements.

Utilisation de fetch pour les requêtes POST

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example REST API

const FetchPosts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from the API
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

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

export default FetchPosts;

• Requête POST : Envoie des données à l'API au format JSON. Dans ce cas, nous envoyons un nouveau message avec un titre et un corps.
• JSON.stringify() : convertit les objets JavaScript en une chaîne JSON pour le corps de la requête.

Utiliser Axios pour les requêtes POST

npm install axios

• axios.post() : envoie une requête POST à ​​l'API. Le corps de la demande contient les données à envoyer.

4. Conclusion

L'intégration d'une API REST dans une application React est une compétence cruciale pour le développement Web moderne. Que vous utilisiez fetch() ou une bibliothèque comme Axios, React vous fournit des hooks puissants comme useEffect et useState pour gérer les requêtes API et mettre à jour l'interface utilisateur en fonction de la réponse. Vous pouvez récupérer des données, envoyer des données et gérer les erreurs avec élégance, garantissant ainsi une expérience utilisateur fluide.

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!