Récupération de données dans React

La récupération de données est fondamentale dans les applications React, alimentant des fonctionnalités telles que le chargement des données utilisateur, le rendu dynamique du contenu, et bien plus encore. React offre un écosystème flexible pour la gestion des données, avec diverses bibliothèques et approches parmi lesquelles choisir en fonction de la complexité et des besoins de performances de votre application. Dans cet article, nous explorerons plusieurs méthodes clés pour la récupération de données dans React, notamment l'API Fetch, Axios, Async/Await, React Query, SWR et GraphQL.

1. Récupération de données avec l'API Fetch

L'API Fetch est une API Web intégrée qui simplifie les requêtes réseau et est largement prise en charge par les navigateurs modernes. Il renvoie une promesse qui se résout avec un objet Response représentant les données de la requête API.

Exemple

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Quand utiliser l'API Fetch

• Petits projets ou ceux ayant des besoins de base en matière de récupération de données.
• Dépendances minimales et compatibilité avec les applications basées sur un navigateur.

2. Utiliser Axios pour la récupération de données

Axios est un client HTTP basé sur des promesses pour le navigateur et Node.js qui offre plus de fonctionnalités que l'API Fetch, comme des intercepteurs de requêtes et de réponses et la possibilité de transformer les requêtes et les réponses.

Exemple

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

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

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

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Avantages d'Axios

• Prend en charge les anciens navigateurs qui peuvent ne pas prendre entièrement en charge l'API Fetch.
• Offre une meilleure gestion des erreurs en rejetant les codes d'erreur HTTP.
• Permet des transformations faciles de requêtes et de réponses, ce qui le rend populaire pour les applications plus volumineuses et plus complexes.

3. Utiliser la syntaxe Async/Await pour une meilleure lisibilité

Avec async et wait, la gestion du code asynchrone en JavaScript est devenue beaucoup plus propre. L'API Fetch et Axios peuvent être utilisés avec la syntaxe async/wait pour rendre le code plus facile à lire.

Exemple avec Fetch

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Avantages d'Async/Await

• Améliore la lisibilité et est plus facile à gérer que les chaînes de promesses.
• Nous permet d'utiliser des blocs try/catch pour la gestion des erreurs.

4. React Query : une puissante bibliothèque de récupération et de mise en cache de données

React Query gère la mise en cache, la synchronisation et les mises à jour de l'état du serveur, vous permettant de récupérer, mettre à jour et mettre en cache les données en toute simplicité. La mise en cache et la récupération automatiques des données de React Query en font un choix populaire pour les applications complexes.

Exemple

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Avantages de la requête React

• Mise en cache des données et actualisation de l'arrière-plan.
• S'intègre bien aux API et gère la logique de nouvelle tentative en cas de panne de réseau.
• Réduit le code pour gérer les états de chargement, d'erreur et de récupération.

5. SWR (Stale-While-Revalidate) de Vercel

SWR est une autre bibliothèque de récupération de données qui donne la priorité aux stratégies de cache et de revalidation. Développé par Vercel, SWR conserve les données à jour en les récupérant automatiquement en arrière-plan chaque fois que l'utilisateur revisite la page.

Exemple

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

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

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

  return (
    <div>
      {loading ? <p>Loading...</p> : data.map((item) => <p key={item.id}>{item.title}</p>)}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

Avantages du SWR

• Utilise la récupération de données en premier dans le cache avec revalidation automatique en arrière-plan.
• S'intègre aux frameworks backend populaires et aux API RESTful.
• Idéal pour les applications qui doivent conserver les données à jour avec un minimum de code.

6. Récupération de données avec GraphQL

GraphQL est un langage de requête pour les API qui offre plus de contrôle sur les données renvoyées. Il vous permet de récupérer uniquement les champs dont vous avez besoin, ce qui peut améliorer les performances en réduisant la sur-récupération ou la sous-récupération.

Exemple avec le client Apollo

Pour démarrer avec Apollo Client, installez-le en exécutant npm install @apollo/client graphql.

const fetchData = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    setData(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Avantages de GraphQL

• Permet une récupération de données plus efficace avec un contrôle sur les champs récupérés.
• Réduit la charge du réseau, particulièrement bénéfique pour les données complexes ou imbriquées.
• S'intègre bien aux bibliothèques comme Apollo Client, améliorant ainsi l'expérience du développeur.

Conclusion

Le choix de la bonne méthode de récupération de données dans React dépend de la complexité de votre projet, des besoins en performances et de vos préférences pour les bibliothèques et les outils. Voici un bref résumé :

• Fetch API : idéal pour les petits projets ; intégré et minimal.
• Axios : Client HTTP plus avancé avec une meilleure gestion des erreurs.
• Async/Await : améliore la lisibilité et la gestion du code asynchrone.
• React Query : excellent pour la mise en cache, la récupération en arrière-plan et la gestion de l'état du serveur.
• SWR : stratégie obsolète pendant la revalidation, idéale pour la récupération de nouvelles données.
• GraphQL avec Apollo : Idéal pour les exigences de données complexes où vous avez besoin de champs spécifiques.

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!