Datenabruf in React

Das Abrufen von Daten ist in React-Anwendungen von grundlegender Bedeutung und ermöglicht Funktionen wie das Laden von Benutzerdaten, das dynamische Rendern von Inhalten und mehr. React bietet ein flexibles Ökosystem für die Datenverarbeitung mit verschiedenen Bibliotheken und Ansätzen, aus denen Sie je nach Komplexität und Leistungsanforderungen Ihrer App wählen können. In diesem Artikel untersuchen wir mehrere wichtige Methoden zum Datenabruf in React, darunter die Fetch-API, Axios, Async/Await, React Query, SWR und GraphQL.

---

1. Daten mit der Fetch-API abrufen

Die Fetch-API ist eine integrierte Web-API, die Netzwerkanfragen einfacher macht und von modernen Browsern weitgehend unterstützt wird. Es gibt ein Versprechen zurück, das mit einem Antwortobjekt aufgelöst wird, das die Daten aus der API-Anfrage darstellt.

Beispiel

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>
  );
};

Wann sollte die Fetch-API verwendet werden?

• Kleine Projekte oder solche mit grundlegenden Datenabrufanforderungen.
• Minimale Abhängigkeiten und Kompatibilität mit browserbasierten Apps.

---

2. Axios zum Datenabruf verwenden

Axios ist ein Promise-basierter HTTP-Client für den Browser und Node.js, der mehr Funktionen als die Fetch-API bietet, wie etwa Anforderungs- und Antwort-Interceptoren und die Möglichkeit, Anforderungen und Antworten umzuwandeln.

Beispiel

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>
  );
};

Vorteile von Axios

• Unterstützt ältere Browser, die die Fetch-API möglicherweise nicht vollständig unterstützen.
• Bietet eine bessere Fehlerbehandlung durch Zurückweisen von HTTP-Fehlercodes.
• Ermöglicht einfache Anforderungs- und Antworttransformationen und ist daher beliebt für größere, komplexere Anwendungen.

---

3. Verwenden der Async/Await-Syntax für bessere Lesbarkeit

Mit Async und Wait ist die Handhabung von asynchronem Code in JavaScript viel sauberer geworden. Sowohl die Fetch-API als auch Axios können mit der Async/Await-Syntax verwendet werden, um den Code leichter lesbar zu machen.

Beispiel mit 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);
  }
};

Vorteile von Async/Await

• Verbessert die Lesbarkeit und ist einfacher zu handhaben als Versprechensketten.
• Ermöglicht uns die Verwendung von Try/Catch-Blöcken zur Fehlerbehandlung.

---

4. React Query: Eine leistungsstarke Bibliothek zum Abrufen und Zwischenspeichern von Daten

React Query übernimmt das Caching, die Synchronisierung und die Aktualisierung des Serverstatus, sodass Sie Daten problemlos abrufen, aktualisieren und zwischenspeichern können. Das automatische Zwischenspeichern und erneute Abrufen von Daten macht React Query zu einer beliebten Wahl für komplexe Anwendungen.

Beispiel

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>
  );
};

Vorteile von React Query

• Daten-Caching und Hintergrundaktualisierung.
• Lässt sich gut in APIs integrieren und verarbeitet die Wiederholungslogik bei Netzwerkfehlern.
• Reduziert den Code für die Verwaltung von Lade-, Fehler- und erneuten Abrufzuständen.

---

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

SWR ist eine weitere Datenabrufbibliothek, die Cache- und Revalidierungsstrategien priorisiert. SWR wurde von Vercel entwickelt und hält die Daten aktuell, indem es sie automatisch im Hintergrund erneut abruft, wenn der Benutzer die Seite erneut besucht.

Beispiel

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>
  );
};

Vorteile von SWR

• Verwendet den Cache-First-Datenabruf mit automatischer Hintergrundüberprüfung.
• Integration mit gängigen Backend-Frameworks und RESTful-APIs.
• Ideal für Anwendungen, die Daten mit minimalem Code aktuell halten müssen.

---

6. Daten mit GraphQL abrufen

GraphQL ist eine Abfragesprache für APIs, die mehr Kontrolle über die zurückgegebenen Daten bietet. Es ermöglicht Ihnen, nur die Felder abzurufen, die Sie benötigen, was die Leistung verbessern kann, indem Über- oder Unterabrufe reduziert werden.

Beispiel mit Apollo Client

Um mit Apollo Client zu beginnen, installieren Sie ihn, indem Sie npm install @apollo/client graphql ausführen.

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);
  }
};

Vorteile von GraphQL

• Ermöglicht einen effizienteren Datenabruf mit Kontrolle über die abgerufenen Felder.
• Reduziert die Netzwerklast, besonders vorteilhaft bei komplexen oder verschachtelten Daten.
• Lässt sich gut in Bibliotheken wie Apollo Client integrieren und verbessert so das Entwicklererlebnis.

---

Abschluss

Die Wahl der richtigen Methode zum Datenabruf in React hängt von der Komplexität Ihres Projekts, den Leistungsanforderungen und Ihrer Präferenz für Bibliotheken und Tools ab. Hier ist eine kurze Zusammenfassung:

• Abruf-API: Gut für kleine Projekte; integriert und minimal.
• Axios: Erweiterter HTTP-Client mit besserer Fehlerbehandlung.
• Async/Await: Verbessert die Lesbarkeit und Verwaltbarkeit von asynchronem Code.
• Abfrage reagieren: Hervorragend geeignet für Caching, erneutes Abrufen im Hintergrund und Serverstatusverwaltung.
• SWR: Veraltete-während-Revalidierung-Strategie, ideal zum Abrufen neuer Daten.
• GraphQL mit Apollo: Am besten für komplexe Datenanforderungen geeignet, bei denen Sie bestimmte Felder benötigen.

Das obige ist der detaillierte Inhalt vonDatenabruf in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!