React Hooks学习--useRequest网络请求Hooks

当前用于网络请求的Hooks是很多的,但是为什么选择使用useRequest呢?

  • 目前的许多Hooks都需要根据不同的场景来选择,比如分页usePagination,加载更多useLoadMore
  • useAsync能力不足,不能支持并行请求
  • useRequest不仅包含来Umi Hooks所有和网络请求相关的Hooks,还借鉴了swr的特性

swr的主要能力在于:我们在发送网络请求时,会优先返回缓存内的数据,然后在背后发起网络请求,最终用新的请求结果来触发组件渲染。

一.useRequest的基本使用

在这里插入图片描述
这是一个最简单的网络请求示例。在这个例子中 useRequest 接收了一个 Promise 函数。在组件初始化时,会自动触发 getUsername 执行,并自动管理 data 、 loading 、 error 等数据。

二.一些基础的params

  1. 手写请求:设置manual : true,即可阻止初始化发送service,只有触发run('xxxxx')才会发送service服务,run中的参数会传给service
  2. 轮询:对需要时刻更新的数据,我们需要不断的发起网络请求,使用pollingInterval:时间
  3. 并行请求:对相同的类型,只维护一次请求,对多个类型,维护多次请求,使用fetchKey
  4. 防抖:debounceInterval:时间 节流:throttleInterval:时间
  5. swr:cacheKey
  6. 分页:paginated:true

注意:在这里插入图片描述

三.集成请求库

如果useRequest第一个参数不是异步请求方法Promise,而是object,array等,则自动使用umi-request发送网络请求

通过使用requestMethod,可以使用其他的请求库
在这里插入图片描述

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值