我确信在开发复杂且大型的 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-返回我们写的所有状态和函数
使用方法如何？我不得不说它会是这样的：
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，我在这些钩子上没有很好地进行最佳实践。我正在学习。但现在可以了。
不要忘记可重用性。
快乐编码。
