Gestion des opérations asynchrones dans React avec useEffect, Promises et Custom Hooks

Gérer les appels asynchrones dans React

La gestion des opérations asynchrones est une exigence courante dans les applications React, en particulier lorsque vous travaillez avec des API, des bases de données ou des services externes. Étant donné que les opérations JavaScript telles que la récupération de données à partir d'une API ou l'exécution de calculs sont souvent asynchrones, React fournit des outils et des techniques pour les gérer avec élégance.

Dans ce guide, nous explorerons différentes façons de gérer les appels asynchrones dans React à l'aide de async/await, Promises et d'autres outils spécifiques à React.

---

1. Utilisation de useEffect pour les appels asynchrones

Le hook

useEffect de React est parfait pour effectuer des effets secondaires comme la récupération de données lors du montage d'un composant. Le hook lui-même ne peut pas renvoyer directement une promesse, nous utilisons donc une fonction asynchrone à l'intérieur de l'effet.

Utilisation de async/await dans useEffect

Voici comment gérer un appel asynchrone pour récupérer des données à l'aide du hook useEffect.

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

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

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

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

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

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

export default AsyncFetchExample;

• async/await : gère le processus de récupération basé sur les promesses.
• Gestion des erreurs : détecte les erreurs et affiche les messages appropriés.
• État de chargement : gère le chargement et affiche un indicateur de chargement jusqu'à ce que les données soient récupérées.

Pourquoi utiliser async/await ?

• Simplifie le code : évite le besoin de chaînes .then() et .catch().
• Plus propre et plus lisible : Les promesses peuvent être traitées de manière plus linéaire.

---

2. Utiliser des promesses pour les opérations asynchrones

Une autre approche courante consiste à utiliser

Promises directement avec then() et catch(). Cette méthode est moins élégante que async/await mais reste largement utilisée en JavaScript pour gérer les opérations asynchrones.

Utilisation des promesses dans useEffect

Voici un exemple utilisant Promise et then() pour les appels asynchrones :

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

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

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

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        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 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• then() : gère la résolution réussie de la promesse.
• catch() : détecte toutes les erreurs qui se produisent lors de l'appel de l'API.
• Gestion des erreurs : Affichage d'un message d'erreur si la requête échoue.

---

3. Utilisation de useReducer pour la logique asynchrone complexe

Lorsque vous avez des transitions d'état plus complexes ou que vous devez gérer plusieurs actions au cours d'un processus asynchrone (comme le chargement, le succès, l'erreur),

useReducer est un excellent outil pour gérer les changements d'état.

Utilisation de useReducer avec des opérations asynchrones

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

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

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

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

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

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

export default AsyncFetchExample;

• useReducer : Un outil de gestion d'état plus robuste pour la logique asynchrone complexe.
• Actions multiples : gère séparément différents états tels que le chargement, le succès et l'erreur.

---

4. Utilisation de hooks personnalisés pour une logique asynchrone réutilisable

Dans certains cas, vous souhaiterez peut-être réutiliser la logique asynchrone sur plusieurs composants. Créer un hook personnalisé est un excellent moyen d'encapsuler la logique et de rendre votre code plus réutilisable.

Création d'un hook personnalisé pour récupérer des données

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

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

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

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        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 id="Posts">Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key="{post.id}">
            <h2 id="post-title">{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• Custom Hook (useFetch) : encapsule la logique de récupération des données, de gestion des erreurs et de l'état de chargement.
• Réutilisabilité : le hook peut être réutilisé sur n'importe quel composant devant récupérer des données.

---

5. Conclusion

La gestion des opérations asynchrones dans React est essentielle pour créer des applications Web modernes. En utilisant des hooks tels que useEffect, useReducer et des hooks personnalisés, vous pouvez facilement gérer le comportement asynchrone, gérer les erreurs et garantir une expérience utilisateur fluide. Que vous récupériez des données, gériez des erreurs ou exécutiez une logique asynchrone complexe, React vous fournit des outils puissants pour gérer ces tâches efficacement.

---

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!