useRequest
一个管理异步数据请求的 Hook.
API 有改动,见ahooks。
代码演示
基础用法
手动执行
轮询
- 通过设置
options.pollingWhenHidden=false
,在屏幕不可见时,暂时暂停定时任务。 - 通过
run
/cancel
来 开启/停止 轮询。 - 在
options.manual=true
时,需要第一次执行run
后,才开始轮询。 - 在
options.pollingSinceLastFinished=false
时,每隔pollingInterval
ms 都会执行一次请求,而不是等上次请求结束。
防抖 Debounce
- 在
options.loadingWhenDebounceStart=false
,loading 不会在第一时间变成true
,要等到debounceInterval
ms 后,即函数真正执行时。
节流 Throttle
Loading Delay
Basic API
const {
data,
error,
loading,
run,
params,
cancel,
refresh,
fetches,
lastSuccessParams,
} = useRequest(service, {
formatResult,
manual,
onSuccess,
onError,
defaultLoading,
loadingDelay,
defaultParams,
pollingInterval,
pollingWhenHidden,
pollingSinceLastFinished,
refreshOnWindowFocus,
focusTimespan,
debounceInterval,
loadingWhenDebounceStart,
throttleInterval,
initialData,
requestMethod,
ready,
throwOnError,
refreshDeps, // v0.9 新增
refreshOnWindowFocus, // v0.9 新增
});
Result
参数 | 说明 | 类型 |
---|---|---|
data |
| undefined / any |
error | service 抛出的异常,默认为 undefined | undefined / Error |
loading | service 是否正在执行 | boolean |
run |
| (...args: any[]) => Promise |
params | 当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3) ,则 params 等于 [1, 2, 3] | any[] |
lastSuccessParams | 和params 类似,但是只有成功执行才赋值。 | any[] |
cancel |
| () => void |
refresh | 使用上一次的 params,重新执行 service | () => Promise |
Params
所有的 Options 均是可选的。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
manual |
| boolean | false |
initialData | 默认的 data | any | - |
formatResult | 格式化请求结果 | (response: any) => any | - |
onSuccess |
| (data: any, params: any[]) => void | - |
onError | service 报错时触发,参数为 error 和 params 。 | (error: Error, params: any[]) => void | - |
defaultParams | 如果 manual=false ,自动执行 run 的时候,默认带上的参数 | any[] | - |
loadingDelay | 设置显示 loading 的延迟时间,避免闪烁 | number | - |
pollingInterval | 轮询间隔,单位为毫秒。设置后,将进入轮询模式,定时触发 run | number | - |
pollingSinceLastFinished |
| boolean | true |
pollingWhenHidden |
| boolean | true |
refreshOnWindowFocus |
| boolean | false |
debounceInterval | 防抖间隔, 单位为毫秒,设置后,请求进入防抖模式。 | number | - |
loadingWhenDebounceStart | 是否在 debounce 过的run 函数执行的第一时间将 loading 置为true | boolean | true |
throttleInterval | 节流间隔, 单位为毫秒,设置后,请求进入节流模式。 | number | - |
throwOnError | 如果 service 报错,我们会帮你捕获并打印日志,如果你需要自己处理异常,可以设置 throwOnError 为 true | boolean | false |
refreshOnWindowFocus v0.9 | 如在屏幕重新聚焦或重新显示时,会重新发起请求。 | boolean | false |
refreshDeps v0.9 | watch 到 refreshDeps 变化,会触发 service 重新执行。 | WatchSource[] | [] |