一、react项目中使用useRequest处理网络请求场景
最近项目使用的useRequest使用起来很顺畅,所以这篇文章来介绍useRequest的用法和注意点
二、ahooks的useRequest介绍
useRequest 是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest 就够了。
useRequest 通过插件式组织代码,核心代码极其简单,并且可以很方便的扩展出更高级的功能。目前已有能力包括:
1、自动请求/手动请求
2、轮询
3、防抖
4、节流
5、屏幕聚焦重新请求
6、错误重试
7、loading delay
8、SWR(stale-while-revalidate)
9、缓存
三、useRequest使用默认用法
默认用法:
useRequest 的第一个参数是一个异步函数,在组件初次加载时,会自动触发该函数执行。同时自动管理该异步函数的 loading , data , error 等状态。
const { data, error, loading } = useRequest(getUsername);
手动触发
如果设置了 options.manual = true,则 useRequest 不会默认执行,需要通过 run 来触发执行。
const { loading, run } = useRequest(changeUsername, {
manual: true