Implémenter un mécanisme de gestion des erreurs pour les requêtes de base de données dans React Query

Implémentation d'un mécanisme de gestion des erreurs pour les requêtes de base de données dans React Query

React Query est une bibliothèque de gestion et de mise en cache des données, qui devient de plus en plus populaire dans le domaine du front-end. Dans les applications, nous devons souvent interagir avec des bases de données, et les requêtes de bases de données peuvent provoquer diverses erreurs. Par conséquent, la mise en œuvre d’un mécanisme efficace de gestion des erreurs est cruciale pour garantir la stabilité des applications et l’expérience utilisateur.

La première étape consiste à installer React Query. Ajoutez-le au projet à l'aide de la commande suivante :

npm install react-query

Une fois l'installation terminée, nous pouvons importer les composants et fonctions nécessaires dans l'application et commencer à écrire du code.

Tout d'abord, nous devons créer une instance QueryClient de React Query et l'envelopper dans le composant racine de l'application.

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

const queryClient = new QueryClient();

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

export default App;

Ensuite, nous avons besoin d'une fonction pour effectuer la requête de base de données. Cette fonction effectuera une requête à l'aide de l'API de récupération de JavaScript et analysera le résultat au format JSON.

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

Dans notre fonction de requête, nous déterminons si la demande a abouti en vérifiant le code d'état de la réponse. Si le code d'état n'est pas compris entre 200 et 299, nous renvoyons une erreur. Cela déclenchera le mécanisme de gestion des erreurs de React Query.

Ensuite, nous pouvons appeler notre fonction de requête et traiter les résultats en utilisant le hook useQuery de React Query.

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;

Dans cet exemple, nous utilisons le hook useQuery pour obtenir une donnée nommée « ressource ». Le deuxième argument que nous transmettons à useQuery est une fonction qui exécute notre fonction de requête, fetchResource. React Query gérera automatiquement la mise en cache des données et la logique d'invalidation. Nous devons uniquement nous concentrer sur l'état de la demande et la gestion des erreurs.

Lors du chargement des données, isLoading sera vrai et nous pourrons afficher un indicateur de chargement. Lorsqu'une erreur se produit et que l'erreur n'est pas vide, nous pouvons afficher un message d'erreur. Lorsque la demande réussit et qu’il n’y a aucune erreur, les données contiendront les données renvoyées par le serveur.

Enfin, nous devons utiliser notre composant Resource dans d'autres composants de l'application.

import Resource from "./Resource";

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

export default App;

Avec ce paramètre, nous pouvons implémenter le mécanisme de gestion des erreurs des requêtes de base de données dans React Query. Qu'il s'agisse d'une erreur réseau ou d'une erreur renvoyée par le serveur, nous pouvons utiliser le mécanisme React Query pour la gérer de manière uniforme et offrir une bonne expérience utilisateur.

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!