Umgang mit asynchronen Vorgängen in React mit useEffect, Promises und benutzerdefinierten Hooks

Asynchrone Aufrufe in React verarbeiten

Die Handhabung asynchroner Vorgänge ist eine häufige Anforderung in React-Anwendungen, insbesondere bei der Arbeit mit APIs, Datenbanken oder externen Diensten. Da JavaScript-Vorgänge wie das Abrufen von Daten von einer API oder das Durchführen von Berechnungen oft asynchron sind, bietet React Tools und Techniken, um diese elegant zu handhaben.

In diesem Leitfaden untersuchen wir verschiedene Möglichkeiten zur Handhabung asynchroner Aufrufe in React mithilfe von async/await, Promises und anderen React-spezifischen Tools.

---

1. Verwendung von useEffect für asynchrone Aufrufe

Der useEffect-Hook von React eignet sich perfekt zum Ausführen von Nebeneffekten wie dem Abrufen von Daten, wenn eine Komponente bereitgestellt wird. Der Hook selbst kann kein Versprechen direkt zurückgeben, daher verwenden wir eine asynchrone Funktion innerhalb des Effekts.

Async/await in useEffect verwenden

Hier erfahren Sie, wie Sie einen asynchronen Aufruf zum Abrufen von Daten mithilfe des useEffect-Hooks verarbeiten.

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: Verarbeitet den versprochenen Abrufprozess.
• Fehlerbehandlung: Fängt Fehler ab und zeigt entsprechende Meldungen an.
• Ladestatus: Verwaltet den Ladevorgang und zeigt eine Ladeanzeige an, bis Daten abgerufen werden.

Warum async/await verwenden?

• Vereinfacht den Code: Vermeidet die Notwendigkeit von .then()- und .catch()-Ketten.
• Sauberer und besser lesbar: Versprechen können linearer gehandhabt werden.

---

2. Versprechen für asynchrone Vorgänge verwenden

Ein weiterer gängiger Ansatz ist die direkte Verwendung von Promises mit then() und Catch(). Diese Methode ist weniger elegant als async/await, wird aber in JavaScript immer noch häufig zur Verarbeitung asynchroner Vorgänge verwendet.

Versprechen in useEffect verwenden

Hier ist ein Beispiel mit Promise und then() für asynchrone Aufrufe:

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(): Behandelt die erfolgreiche Auflösung des Versprechens.
• catch(): Fängt alle Fehler ab, die während des API-Aufrufs auftreten.
• Fehlerbehandlung: Anzeige einer Fehlermeldung, wenn die Anfrage fehlschlägt.

---

3. Verwendung von useReducer für komplexe asynchrone Logik

Wenn Sie komplexere Zustandsübergänge haben oder mehrere Aktionen während eines asynchronen Prozesses verarbeiten müssen (wie Laden, Erfolg, Fehler), ist useReducer ein großartiges Tool zum Verwalten von Zustandsänderungen.

useReducer mit asynchronen Vorgängen verwenden

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: Ein robusteres Zustandsverwaltungstool für komplexe asynchrone Logik.
• Mehrere Aktionen: Behandelt verschiedene Zustände wie Laden, Erfolg und Fehler separat.

---

4. Benutzerdefinierte Hooks für wiederverwendbare asynchrone Logik verwenden

In einigen Fällen möchten Sie möglicherweise asynchrone Logik über mehrere Komponenten hinweg wiederverwenden. Das Erstellen eines benutzerdefinierten Hooks ist eine hervorragende Möglichkeit, die Logik zu kapseln und Ihren Code wiederverwendbar zu machen.

Erstellen eines benutzerdefinierten Hooks zum Abrufen von Daten

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;

• Benutzerdefinierter Hook (useFetch): Kapselt die Logik zum Abrufen von Daten, zur Fehlerbehandlung und zum Ladestatus.
• Wiederverwendbarkeit: Der Hook kann für jede Komponente wiederverwendet werden, die Daten abrufen muss.

---

5. Fazit

Die Handhabung asynchroner Vorgänge in React ist für die Erstellung moderner Webanwendungen unerlässlich. Durch die Verwendung von Hooks wie useEffect, useReducer und benutzerdefinierten Hooks können Sie asynchrones Verhalten einfach verwalten, Fehler behandeln und eine reibungslose Benutzererfahrung gewährleisten. Egal, ob Sie Daten abrufen, Fehler behandeln oder komplexe asynchrone Logik ausführen, React bietet Ihnen leistungsstarke Tools, um diese Aufgaben effizient zu verwalten.

---

Das obige ist der detaillierte Inhalt vonUmgang mit asynchronen Vorgängen in React mit useEffect, Promises und benutzerdefinierten Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!