ahooks介绍、ahooks详细使用、react项目使用useRequest处理网络请求场景_ahooks userequest使用

一、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
});

项目中接口参数的传递，数据的处理

const { data, runAsync: getChartData } = useRequest(() => getEquipState({ pvArrayId: id }), {
    manual: true,
    pollingInterval: 10000,
    pollingWhenHidden: false,
  });
  const initData = async () => {
    const res = await getChartData();
    if (res && res.status === 200) {
      console.log(res.data);
    }
  };
  useEffect(() => {
    initData();
  }, []);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

getChartData ：定义手动触发请求的接口名
getEquipState：定义的请求接口地址
{ pvArrayId: id }：接口请求携带的参数
manual：true为手动触发请求，false为自动触发
pollingInterval：开启轮询，轮询间隔的时间为10000
pollingWhenHidden：false：当页面切换或组件隐藏时取消轮询 true：不取消
initData：初始化数据，res为接口返回的数据，根据需求继续后续的数据处理

用法简单，但亲测真的很好用~~~大家一定要用起来呀

好啦，项目国际化版本使用插件开发就介绍到这里吧，有疑问欢迎留言喔~~觉得有用就点赞收藏一下吧，不然下次会找不到了哟^ _ ^