Note·Fetch data with React Hooks
在 Reack Hook 中处理网络请求似乎要比 class 组件麻烦一点,毕竟没有 this
实例对象可以在上面封装方法。不要拘束于之前的思维,Hook 的数据请求也许会有更好的方式。
这次我们的实验目标是通过 Github Api 来获取 issues 文章列表,通过传入不同的页码来实现分页。通过实践来研究一下在 hook 中如何优雅地实现数据请求,并在最后封装一个通用的自定义数据请求 hook,以便在今后的项目中复用。
Data Fetching with React Hooks
我们先实现一个简单的函数组件,该组件渲染一个文章列表,并添加一个翻页按钮,每次点击按钮就向下翻一页并向 Github Api 请求文章列表数据。不要问我为什么没有上一页按钮或者分页溢出了怎么办,不要在意这些细节,我们这里只是实验 hook 网络请求,不考虑这种业务细节。
这个功能很简单,如果稍微熟悉 react hook 的使用的话很快就能实现。我们可以先用 useState
初始化文章列表和初始页码,然后使用 useEffect
获取当前页的文章列表,并在页码更新时重新获取文章列表。第一阶段的代码如下:
需要注意的是使用 useEffect
的时候第一个函数参数不能是一个异步的 async 函数或者是返回一个 Promise,也就是我们不能像下面这样调用,否则会报出警告:
useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.
Add Loading and Error
上面的简易版本已经可以正常工作了,但是有时我们需要在接口请求时处理更多的页面状态。比如将页面置于 loading,并且在网络请求出错时进行错误处理。根据这个需求,我们在第二个版本加入 loading 和 error 处理,并在渲染组件时候根据不同的状态展示不同的内容:
Custom Data Fetching Hook
我们第二版本的数据请求方法已经基本可以满足需求,但是实际业务中数据请求并不只限于一个地方存在,所有往往会封装一个通用的数据请求方法以供多处调用。我们通过 useReducer
对请求进行统一封装,实现一个可重复使用的自定义 hook。最终版代码如下:
参考文章:
React-hooks-fetch-data
我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1z8c26eddpi8c
金点网络-全网资源,一网打尽 » Note·Fetch data with React Hooks
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
- 是否提供免费更新服务?
- 持续更新,永久免费
- 是否经过安全检测?
- 安全无毒,放心食用