在 React Query 中實作資料庫查詢的錯誤處理機制

在React Query 中實作資料庫查詢的錯誤處理機制

#React Query 是一個用於管理和快取資料的函式庫，它在前端領域越來越受歡迎。在應用程式中，我們經常需要與資料庫進行交互，而資料庫查詢可能會出現各種錯誤。因此，實現一個有效的錯誤處理機制對於確保應用程式的穩定性和使用者體驗至關重要。

第一步是安裝 React Query。使用以下命令將其新增至專案：

npm install react-query

安裝完成後，我們可以在應用程式中匯入必要的元件和函數，並開始編寫程式碼。

首先，我們需要建立一個 React Query 的 QueryClient 實例，並將其包裝在應用程式的根元件中。

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

const queryClient = new QueryClient();

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

export default App;

接下來，我們需要一個函數來執行資料庫查詢。這個函數將使用 JavaScript 的 fetch API 發出請求，並將結果解析為 JSON 格式。

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

在我們的查詢函數中，我們透過檢查回應的狀態碼來判斷請求是否成功。如果狀態碼不在 200-299 的範圍內，我們拋出一個錯誤。這將觸發 React Query 的錯誤處理機制。

接下來，我們可以透過使用 React Query 的 useQuery 鉤子來呼叫我們的查詢函數並處理結果。

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;

在這個範例中，我們使用 useQuery 鉤子來取得一個名為 "resource" 的資料。我們傳遞給 useQuery 的第二個參數是一個函數，用來執行我們的查詢函數 fetchResource。 React Query 會自動處理資料的快取和失效邏輯，我們只需要專注於請求狀態和錯誤處理。

當資料載入時，isLoading 會為 true，我們可以顯示一個載入指標。當發生錯誤時，error 不為空，我們可以顯示一個錯誤訊息。在請求成功且沒有錯誤時，data 將包含從伺服器傳回的資料。

最後，我們需要在應用程式的其他元件中使用我們的 Resource 元件。

import Resource from "./Resource";

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

export default App;

透過這樣的設置，我們可以在 React Query 中實作資料庫查詢的錯誤處理機制。無論是網路錯誤還是伺服器傳回的錯誤，我們都可以透過 React Query 的機制來統一處理並提供良好的使用者體驗。

以上是在 React Query 中實作資料庫查詢的錯誤處理機制的詳細內容。更多資訊請關注PHP中文網其他相關文章！