在实践中反应：处理HTTP请求-js教程-PHP中文网

在实践中反应：处理HTTP请求

心靈之曲

发布： 2025-02-08 09:18:18

转载

958人浏览过

处理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>{json.stringify(data)}</pre>}
    </div>
  );
}

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>{json.stringify(data)}</pre>}
    </div>
  );
}

export default app;

登录后复制

在自定义挂钩中分开请求

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

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

hook productuctfindall负责制作产品申请；

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

第三种方法

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

// 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>{JSON.stringify(data)}</pre>}
    </div>
  );
}

export default App;

登录后复制