标签导航：

处理http请求

这是一种常见的方法，您可能已经看到了许多代码的示例，这些代码在组件中进行了http调用，更改的细节，例如使用或axios的使用或状态的管理方式

>您可能已经看到了如何将此代码重新放置为自定义钩子，但让我们再次进行

此组件相对简单，您在组件中具有3个状态，以表示的状态 申请

>使用useefect仅在安装组件时执行一次，并且是制造

整个请求有效
第一种方法：

import { useeffect, usestate } from "react";

function app() {
  const [isloading, setisloading] = usestate(false);
  const [error, seterror] = usestate<any>(null);
  const [data, setdata] = usestate<any>(null);

  useeffect(() => {
    const fetchdata = async () => {
      setisloading(true);

      const response = await fetch("https://fakestoreapi.com/products");

      if (!response.ok) throw new error("failed to fetch data");

      const data = await response.json();

      setdata(data);
      setisloading(false);
    };

    fetchdata().catch((e) => seterror(e));
  }, []);

  return (
    <div>
      {isloading && <p>loading...</p>}

      {error && <p>{error.message}</p>}

      {data && <pre class="brush:php;toolbar:false">{json.stringify(data)}
} ); } export default app;
在钩子中分开获取逻辑

第二种方法

在这种方法中，我们在自定义挂钩中分离出fetch逻辑，在任何组件中都可以重复使用，

但是我们也降低了组件的责任，现在只需要处理国家的渲染和> 申请

>但这仍然可以改善，应用程序组件仍然需要处理提出请求的逻辑，尽管不是

> 需要处理请求的状态

第二种方法：


// usefetch.tsx
import { useeffect, usestate } from "react";

type usefetchparams<t> = {
  fetcher: () => promise<t>;
  querykey: string[];
};

export function usefetch<t>({ fetcher, querykey }: usefetchparams<t>) {
  const [isloading, setisloading] = usestate(false);
  const [error, seterror] = usestate<any>(null);
  const [data, setdata] = usestate<t | null>(null);

  const querykeystring = json.stringify(querykey);

  useeffect(() => {
    const fetchdata = async () => {
      setisloading(true);

      const data = await fetcher();
      setdata(data);

      setisloading(false);
    };

    fetchdata().catch((e) => seterror(e));
  }, [querykeystring]);

  return { isloading, error, data };
}

// app.tsx
import { usefetch } from "./usefetch.tsx";

const endpoint = "https://fakestoreapi.com/products";

function app() {
  const { isloading, error, data } = usefetch({
    querykey: [endpoint],
    fetcher: async () => {
      const response = await fetch(endpoint);
      if (!response.ok) throw new error("failed to fetch data");
      return response.json();
    },
  })

  return (
    <div>
      {isloading && <p>loading...</p>}

      {error && <p>{error.message}</p>}

      {data && <pre class="brush:php;toolbar:false">{json.stringify(data)}
} ); } export default app;
在自定义挂钩中分开请求

>现在，这就是我认为理想的责任分离。

>自定义挂钩使用fect，负责处理提出请求的逻辑；

hook productuctfindall负责制作产品申请；

应用程序组件负责处理产品渲染和请求状态

第三种方法

    // useproductfindall.tsx
import { usefetch } from "./usefetch.tsx";


const endpoint = "https://fakestoreapi.com/products";


async function fetchproductfindall(params = {}) {
  const searchparams = new urlsearchparams(params);

  const response = await fetch(endpoint + `?${searchparams.tostring()}`);
  if (!response.ok) throw new error("failed to fetch data");
  return response.json();
}

export function useproductfindall(params = {}) {
  return usefetch({
    querykey: [endpoint, params],
    fetcher: () => fetchproductfindall(params)
  });
}

    // App.tsx
import { useProductFindAll } from "./useProductFindAll.tsx";

function App() {
  const { isLoading, error, data } = useProductFindAll({ limit: 6 })

  return (
    <div>
      {isLoading && <p>Loading...</p>}

      {error && <p>{error.message}</p>}

      {data && <pre class="brush:php;toolbar:false">{JSON.stringify(data)}
    } ); } export default App;
  • 如果您有经验或知道react-query库，则可以看到hook usefetch非常
    • 类似的
  • 使用react-query的钩子，这是真的 react-want是一个库，可以提取提出申请的逻辑，并且是处理
    • >的绝佳替代方法 后端的后端状态。该库非常强大，并且具有许多资源，例如缓存，重复，分页
  • >因此，如果您要处理项目中的许多请求，我建议您查看库
    • > 反应