react 网络请求用什么,react 请求数据
本教程运行环境：Windows7系统，React版本react17.0.1，Dell G3电脑。
React 中请求远程数据的四种方法
React是一个专用的组件库。因此，它没有关于如何请求远程数据的建议。如果想通过HTTP请求数据并发送给Web API，可以考虑以下四种方法。
内嵌写作
管理集中化
自定义挂钩
反应-查询/swr
方式1：内联
这是最简单直接的选择。在React组件中进行HTTP调用并处理响应。
fetch(/users )。然后(response=response . JSON())；看起来很简单。但是，这个例子忽略了加载状态、错误处理、声明和设置相关状态等。在现实世界中，HTTP调用看起来更像这样。
从“react”导入React，{ useState，use effect }；
导出默认函数InlineDemo() {
const [users，set users]=useState([])；
const [loading，set loading]=use state(true)；
const [error，setError]=use state(null)；
useEffect(()={
获取(` { process . env . react _ APP _ API _ BASE _ URL }用户`)。然后(response={
if (response.ok)返回response . JSON()；
抛出回应；
})。然后(json={
setUsers(JSON)；
})。catch(错误={
console.error(错误)；
setError(err)；
})。最后(()={
set loading(false)；
});
}, []);
if (loading)返回 loading . ；
如果(错误)返回‘哎呀！’；
返回用户[0]。用户名；
}对于一个简单的应用，只要发出几个请求就可以正常工作。但是上面的状态声明和useEffect都是模板。如果我要进行许多HTTP调用，我不想为每个调用重复和维护大约20行代码。内联调用让你的代码难看。
看看我们必须解决的一些问题：
声明装载状态
声明错误状态
将错误打印到控制台
通过返回200 response.ok检查响应是否通过.
如果响应正常，则将响应转换为json并返回promise。
如果响应不正确，则抛出一个错误。
在finally中隐藏加载状态，以确保即使发生错误，加载也是隐藏的。
声明一个空的依赖数组，这样useEffect只运行一次。
方式2：文件夹集中管理
如果我们在一个文件夹中处理所有HTTP调用，会发生什么情况？使用这种方法，我们创建了一个名为services的文件夹，并将所有进行HTTP调用的函数放入其中。服务是最流行的术语，我也在下面讨论了许多好的替代名称，例如客户端或api。
重要的一点是，所有的HTTP调用都由纯JavaScript函数处理，并存储在一个文件夹中。这是一个集中式getUsers函数：
导出函数getUsers() {
return fetch(` $ { process . env . react _ APP _ API _ BASE _ URL } users `)。然后(响应=
response.json()
);
}下面是对getUsers函数的调用：
从“react”导入React，{ useState，use effect }；
从导入{ getUsers }。/services/user service ；
导出默认函数CentralDemo() {
const [users，set users]=useState([])；
const [loading，set loading]=use state(true)；
const [error，setError]=use state(null)；
useEffect(()={
getUsers()。然后(json={
setUsers(JSON)；
set loading(false)；
})。catch(错误={
console.error(错误)；
setError(err)；
});
}, []);
if (loading)返回 loading . ；
如果(错误)返回‘哎呀！’；
返回用户[0]。用户名；
}然而，这并没有太多地简化请求调用。的主要优点是它可以强制一致地处理HTTP调用。想法是这样的：当相关的函数被一起处理时，更容易一致地处理它们。如果userService文件夹充满了进行HTTP调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果呼叫是多路复用的，那么从这个集中的位置呼叫它们是很容易的。
然而，我们可以做得更好。
方式3：自定义Hook
有了React钩子的魔力，我们终于可以专心处理重复的逻辑了。那么如何创建一个自定义的useFetch钩子来简化我们的HTTP调用呢？
从“做出反应”导入{ useState，useEffect，useRef }。
//这个自定义挂钩集中并简化了超文本传送协议调用的处理
导出默认函数useFetch(url，init) {
const [data，setData]=使用状态(null)；
const [loading，set loading]=使用状态(true)；
const [error，setError]=使用状态(null)；
const pre vinit=useRef()；
const prev URL=useRef()；
useEffect(()={
//仅当全球资源定位器(Uniform Resource Locator)或初始化参数更改时才重新提取。
如果(上一个URL。current===URL prev init。当前===初始)返回；
prevUrl.current=url
prevInit.current=init
获取(过程。环境。react _ APP _ API _ BASE _ URL URL，init)。然后(响应={
if (response.ok)返回回应。JSON()；
设置错误(响应);
})。然后(data=setData(data))。接住(错误={
控制台.错误(错误);
setError(err)；
})。最后(()=set loading(false))；
}，[init，URL])；
返回{数据，加载，错误}。
}你的可能看起来不一样，但我发现这个基本的使用方法很有用。这个钩极大地简化了所有调用。看看使用这个钩需要多少代码：
从“做出反应”导入做出反应；
从导入使用Fetch ./use fetch ；
导出默认函数HookDemo()
const { data，loading，error }=use fetch( users )；
如果(加载)返回正在加载.
如果（错误)返回哎呀!；
返回数据[0]。用户名；
}对于许多应用程序，你只需要一个这样的自定义钩子。但是这个钩已经很复杂了，并且它消除了许多问题。
但是还有很多我们没有考虑到的点：缓存？如果客户端的连接不可靠，如何重新获取？你想在用户重新调整标签时重新获取新数据吗？如何消除重复查询？
你可以不断完善这个自定义钩来完成所有这些操作。但是，您应该只需要方式4:
方式4：react-query/swr
使用反应-查询或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义钩了。而且每个超文本传送协议调用都需要很少的代码：
从“做出反应”导入做出反应；
从导入{ getUsers } ./services/用户服务；
从"反应-查询"导入{使用查询}；
导出默认函数ReactQueryDemo() {
const { data，isLoading，error }=useQuery(users ，get users)；
如果(正在加载)返回"正在加载."；
如果（错误)返回哎呀!；
返回数据[0]。用户名；
}对于大多数应用程序来说，今天这是我的首选。这是完整的代码：https://代码沙箱。io/s/4-ways-to-handle-restful-http-in-react-k3xug，你可以自己进行比较。
推荐学习： 《react视频教程》 以上就是反应中请求远程数据的四种方法是什么的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。