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가 되고 로드 표시를 표시할 수 있습니다. 오류가 발생하고 오류가 비어 있지 않으면 오류 메시지를 표시할 수 있습니다. 요청이 성공하고 오류가 없으면 서버에서 반환된 데이터가 데이터에 포함됩니다.

마지막으로 애플리케이션의 다른 구성 요소에서 Resource 구성 요소를 사용해야 합니다.

import Resource from "./Resource";

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

export default App;

이 설정을 사용하면 React Query에서 데이터베이스 쿼리의 오류 처리 메커니즘을 구현할 수 있습니다. 네트워크 오류이든 서버에서 반환된 오류이든 React Query 메커니즘을 사용하여 이를 균일하게 처리하고 좋은 사용자 경험을 제공할 수 있습니다.

위 내용은 React Query에서 데이터베이스 쿼리에 대한 오류 처리 메커니즘 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!