当前位置：首页 > 文章列表 > 文章 > 前端 > 在实践中反应：处理HTTP请求

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

来源：dev.to 2025-02-09 12:31:12 0浏览收藏

珍惜时间，勤奋学习！今天给大家带来《在实践中反应：处理HTTP请求》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

处理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)}

}

); } 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)}

}

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

}

); } export default App;

如果您有经验或知道react-query库，则可以看到hook usefetch非常

类似的

使用react-query的钩子，这是真的 react-want是一个库，可以提取提出申请的逻辑，并且是处理

>的绝佳替代方法后端的后端状态。该库非常强大，并且具有许多资源，例如缓存，重复，分页

>因此，如果您要处理项目中的许多请求，我建议您查看库

> 反应

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除