我确信在开发复杂且大型的 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：字符串|未定义，配置：对象）=> { 如果（网址）{ 轴 .get（网址，配置） .then((res) => { setGetRes(res.data); setGetLoading(假); }) .catch((错误) => { setGetError(错误); setGetLoading(假); toast.error(apiErrors.server_network_error); }); } }; 返回 { getData, getRes, getError, getLoading };}
说明：当我搜索创建像 useGet 这样的钩子时，我在通灵时遇到了问题。这个问题在我每次使用那个钩子时都会导致无限循环！我通过提供一个函数来从 useGet 返回调用使用端来解决这个问题，而不是调用它自己的钩子。
你可以很明显地看到它。（getData函数）
我们在那个钩子中真正做的事情是这样的：
1-设置所需的状态
2-声明 getData 函数（该函数向给定的 url 发送 get 请求并保存我们状态中的响应和错误）
3-返回我们写的所有状态和函数
使用方法如何？我不得不说它会是这样的：
AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务
56 查看详情
const {getData , getRes , getErrors , getLoading} = useGet()使用效果（（）=> { 异步 const fetche = () => { 等待 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) => { 如果（网址）{ 轴 .post（网址、数据、配置） .then((res) => { setPostLoading(假); setPostRes(res.data); }) .catch((错误) => { setPostLoading(假); setPostError(错误); toast.error(apiErrors.server_network_error); }); } }; 返回 { postData, postRes, postError, postLoading };}
要快乐！逻辑是一样的。但这是数据属性的差异！我们知道，当我们想要将某些内容发布到服务器时，我们必须随之发送数据。所以我们也在这里发送数据。
实施它们非常容易。现在您可以在您的应用程序中重复使用您的调用 api 功能！
Maby，我在这些钩子上没有很好地进行最佳实践。我正在学习。但现在可以了。
不要忘记可重用性。
快乐编码。
以上就是用于 Api 调用的自定义钩子（Reactjs）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/473716.html
微信扫一扫 
支付宝扫一扫 
