用于 Api 调用的自定义钩子（Reactjs）

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签钩子

我确信在开发复杂且大型的 React 应用程序时，每个人都会为代码的可重用性而苦苦挣扎。一种方法是（用于 api 调用的自定义挂钩）。让我们开始创建它们吧。

首先，我对我的糟糕写作感到抱歉，我的语言本来就不是英语:)

当然，我们在应用程序中必须多次从服务器获取数据。那么，我们如何才能有效地处理这些需求呢？

使用获取自定义挂钩

该自定义钩子的代码将是这样的：

从“axios”导入axios；从“反应”导入{useState}；从“react-toastify”导入{toast}；从“../../features/utils/ApiErrorMessages.json”导入 apiErrors；导出默认函数 useGet() {  const [getRes, setGetRes] = useState({});  const [getLoading, setGetLoading] = useState(true);  const [getError, setGetError] = useState({});  const getData =（url：字符串|未定义，配置：对象）=&gt; {    如果（网址）{      轴        .get（网址，配置）        .then((res) =&gt; {          setGetRes(res.data);          setGetLoading(假);        })        .catch((错误) =&gt; {          setGetError(错误);          setGetLoading(假);          toast.error(apiErrors.server_network_error);        });    }  };  返回 { getData, getRes, getError, getLoading };}

说明：当我搜索创建像 useGet 这样的钩子时，我在通灵时遇到了问题。这个问题在我每次使用那个钩子时都会导致无限循环！我通过提供一个函数来从 useGet 返回调用使用端来解决这个问题，而不是调用它自己的钩子。
你可以很明显地看到它。（getData函数）

我们在那个钩子中真正做的事情是这样的：
1-设置所需的状态
2-声明 getData 函数（该函数向给定的 url 发送 get 请求并保存我们状态中的响应和错误）
3-返回我们写的所有状态和函数

使用方法如何？我不得不说它会是这样的：

const {getData , getRes , getErrors , getLoading} = useGet()使用效果（（）=&gt; {    异步 const fetche = () =&gt; {        等待 getData({url : '/api/users' , 配置 : {}});    } },[])// 你的渲染逻辑

我不知道我是如何很好地解释我的代码中发生的事情的，但我希望你理解这一点。

usePost 自定义挂钩
代码：

从“axios”导入axios；从“反应”导入{useState}；从“../../features/utils/ApiErrorMessages.json”导入 apiErrors；从“react-toastify”导入{toast}；输入 postDataProps = {  网址：字符串|不明确的;  数据：对象；  配置：对象；};导出默认函数 usePost() {  const [postRes, setPostRes] = useState({});  const [postLoading, setPostLoading] = useState(true);  const [postError, setPostError] = useState({});  const postData = ({ url, data, config }: postDataProps) =&gt; {    如果（网址）{      轴        .post（网址、数据、配置）        .then((res) =&gt; {          setPostLoading(假);          setPostRes(res.data);        })        .catch((错误) =&gt; {          setPostLoading(假);          setPostError(错误);          toast.error(apiErrors.server_network_error);        });    }  };  返回 { postData, postRes, postError, postLoading };}

要快乐！逻辑是一样的。但这是数据属性的差异！我们知道，当我们想要将某些内容发布到服务器时，我们必须随之发送数据。所以我们也在这里发送数据。

实施它们非常容易。现在您可以在您的应用程序中重复使用您的调用 api 功能！
Maby，我在这些钩子上没有很好地进行最佳实践。我正在学习。但现在可以了。
不要忘记可重用性。

快乐编码。

文章推荐

用于 Api 调用的自定义钩子（Reactjs）

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？