Laksanakan mekanisme pengendalian ralat untuk pertanyaan pangkalan data dalam React Query

Melaksanakan mekanisme pengendalian ralat pertanyaan pangkalan data dalam React Query

React Query ialah perpustakaan yang digunakan untuk mengurus dan cache data. medan akhir semakin popular. Dalam aplikasi, kita sering perlu berinteraksi dengan pangkalan data, dan pertanyaan pangkalan data boleh menyebabkan pelbagai ralat. Oleh itu, melaksanakan mekanisme pengendalian ralat yang berkesan adalah penting untuk memastikan kestabilan aplikasi dan pengalaman pengguna.

Langkah pertama ialah memasang React Query. Tambahkannya pada projek menggunakan arahan berikut:

npm install react-query

Setelah pemasangan selesai, kami boleh mengimport komponen dan fungsi yang diperlukan dalam aplikasi dan mula menulis kod.

Pertama, kita perlu mencipta contoh QueryClient bagi React Query dan membungkusnya dalam komponen akar aplikasi.

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

const queryClient = new QueryClient();

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

export default App;

Seterusnya, kita memerlukan fungsi untuk melaksanakan pertanyaan pangkalan data. Fungsi ini akan membuat permintaan menggunakan API pengambilan JavaScript dan menghuraikan hasilnya ke dalam format JSON.

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

Dalam fungsi pertanyaan kami, kami menentukan sama ada permintaan itu berjaya dengan menyemak kod status respons. Jika kod status tidak berada dalam julat 200-299, kami membuang ralat. Ini akan mencetuskan mekanisme pengendalian ralat React Query.

Seterusnya, kami boleh memanggil fungsi pertanyaan kami dan memproses hasilnya dengan menggunakan cangkuk useQuery 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;

Dalam contoh ini, kami menggunakan cangkuk useQuery untuk mendapatkan data bernama "sumber". Argumen kedua yang kami berikan kepada useQuery ialah fungsi yang melaksanakan fungsi pertanyaan kami, fetchResource. React Query akan mengendalikan caching data dan logik ketidaksahihan secara automatik Kami hanya perlu menumpukan pada status permintaan dan pengendalian ralat.

Apabila data sedang dimuatkan, isLoading akan menjadi benar dan kami boleh memaparkan penunjuk pemuatan. Apabila ralat berlaku dan ralat tidak kosong, kami boleh memaparkan mesej ralat. Apabila permintaan berjaya dan tiada ralat, data akan mengandungi data yang dikembalikan daripada pelayan.

Akhir sekali, kami perlu menggunakan komponen Sumber kami dalam komponen lain aplikasi.

import Resource from "./Resource";

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

export default App;

Dengan tetapan ini, kami boleh melaksanakan mekanisme pengendalian ralat pertanyaan pangkalan data dalam React Query. Sama ada ralat rangkaian atau ralat yang dikembalikan oleh pelayan, kami boleh menggunakan mekanisme React Query untuk mengendalikannya secara seragam dan memberikan pengalaman pengguna yang baik.

Atas ialah kandungan terperinci Laksanakan mekanisme pengendalian ralat untuk pertanyaan pangkalan data dalam React Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!