Maison interface Web js tutoriel Gestion des opérations asynchrones dans React avec useEffect, Promises et Custom Hooks

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

Jan 05, 2025 pm 03:14 PM

Handling Async Operations in React with useEffect, Promises, and 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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;
Copier après la connexion
Copier après la connexion
  • 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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;
Copier après la connexion
Copier après la connexion
  • 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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;
Copier après la connexion
Copier après la connexion
  • 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>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;
Copier après la connexion
Copier après la connexion
  • 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

10 Highlighters de syntaxe jQuery 10 Highlighters de syntaxe jQuery Mar 02, 2025 am 12:32 AM

10 Highlighters de syntaxe jQuery

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

10 tutoriels JavaScript & jQuery MVC 10 tutoriels JavaScript & jQuery MVC Mar 02, 2025 am 01:16 AM

10 tutoriels JavaScript & jQuery MVC

See all articles