Implementieren Sie einen Fehlerbehandlungsmechanismus für Datenbankabfragen in React Query

Implementieren eines Fehlerbehandlungsmechanismus für Datenbankabfragen in React Query

React Query ist eine Bibliothek zum Verwalten und Zwischenspeichern von Daten, die im Front-End-Bereich immer beliebter wird. In Anwendungen müssen wir häufig mit Datenbanken interagieren, und Datenbankabfragen können verschiedene Fehler verursachen. Daher ist die Implementierung eines effektiven Fehlerbehandlungsmechanismus von entscheidender Bedeutung, um die Anwendungsstabilität und das Benutzererlebnis sicherzustellen.

Der erste Schritt besteht darin, React Query zu installieren. Fügen Sie es mit dem folgenden Befehl zum Projekt hinzu:

npm install react-query

Sobald die Installation abgeschlossen ist, können wir die erforderlichen Komponenten und Funktionen in die Anwendung importieren und mit dem Schreiben von Code beginnen.

Zuerst müssen wir eine QueryClient-Instanz von React Query erstellen und diese in die Stammkomponente der Anwendung einschließen.

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

Als nächstes benötigen wir eine Funktion, um die Datenbankabfrage durchzuführen. Diese Funktion stellt mithilfe der Abruf-API von JavaScript eine Anfrage und analysiert das Ergebnis im JSON-Format.

async function fetchResource(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("请求出错");
  }
  return response.json();
}

In unserer Abfragefunktion ermitteln wir, ob die Anfrage erfolgreich war, indem wir den Statuscode der Antwort prüfen. Wenn der Statuscode nicht im Bereich 200–299 liegt, geben wir einen Fehler aus. Dadurch wird der Fehlerbehandlungsmechanismus von React Query ausgelöst.

Als nächstes können wir unsere Abfragefunktion aufrufen und die Ergebnisse mithilfe des useQuery-Hooks von React Query verarbeiten.

import { useQuery } from "react-query";

function Resource() {
  const { data, error, isLoading } = useQuery("resource", () =>
    fetchResource("/api/resource")
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>发生错误：{error.message}</div>;
  }

  return <div>数据：{JSON.stringify(data)}</div>;
}

export default Resource;

In diesem Beispiel verwenden wir den useQuery-Hook, um Daten mit dem Namen „resource“ abzurufen. Das zweite Argument, das wir an useQuery übergeben, ist eine Funktion, die unsere Abfragefunktion fetchResource ausführt. React Query übernimmt automatisch das Daten-Caching und die Invalidierungslogik. Wir müssen uns nur auf den Anforderungsstatus und die Fehlerbehandlung konzentrieren.

Wenn Daten geladen werden, ist isLoading wahr und wir können eine Ladeanzeige anzeigen. Wenn ein Fehler auftritt und der Fehler nicht leer ist, können wir eine Fehlermeldung anzeigen. Wenn die Anfrage erfolgreich ist und keine Fehler vorliegen, enthalten die Daten die vom Server zurückgegebenen Daten.

Schließlich müssen wir unsere Ressourcenkomponente in anderen Komponenten der Anwendung verwenden.

import Resource from "./Resource";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Resource />
    </QueryClientProvider>
  );
}

export default App;

Mit dieser Einstellung können wir den Fehlerbehandlungsmechanismus von Datenbankabfragen in React Query implementieren. Unabhängig davon, ob es sich um einen Netzwerkfehler oder einen vom Server zurückgegebenen Fehler handelt, können wir den React Query-Mechanismus verwenden, um ihn einheitlich zu behandeln und eine gute Benutzererfahrung zu bieten.

Das obige ist der detaillierte Inhalt vonImplementieren Sie einen Fehlerbehandlungsmechanismus für Datenbankabfragen in React Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!