$ npm install keylion-hooks
与请求库无关,支持axio、fetch等请求封装库。 用于数据获取的Vue 3组合API,支持SWR、轮询、错误重试、缓存请求
import {useRequest} from "keylion-hooks";
function changeUsername() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({data: 123, code: 123});
}, 1000);
});
}
let {data, run} = useRequest(changeUsername, {
refreshOnWindowFocus: true,
// focusTimespan: 8000 // 延迟 n 秒 后执行, 并不是每次聚焦都执行,而是过一段时间后可以再次执行
// pollingInterval: 1000,
// pollingWhenHidden: true,
});
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
manual |
是否手动控制发送请求 | boolean | false |
pollingInterval |
轮询间隔时间 | number | - |
pollingErrorRetryCount |
轮询次数 | number | - |
pollingWhenHidden |
不在当前屏幕则停止轮询 | boolean | false |
refreshDeps |
依赖刷新 值变化后重新触发请求 | Ref[] | - |
refreshOnWindowFocus |
屏幕聚焦重新请求 | boolean | false |
focusTimespan |
屏幕聚焦重新请求延时(n 秒内重新聚焦请求一次) | number | 1000 |
debounceInterval |
防抖延时 | number | - |
throttleInterval |
节流延时 | number | - |
loadingDelay |
延长 loading 变成 true 的时间 | number | - |
cacheKey |
缓存的唯一 Key (在发送一次新的请求的时候如果有缓存,会先使用缓存的结果值,等到请求完成后替换成请求结果值) | string | - |
cacheTime |
缓存有效时间 | number | - |
staleTime |
如何设置了 staleTime =-1 那么永久保鲜, 在 staleTime 保鲜期间内不再发起请求间 | number | - |
params |
传给接口的参数 | any[] | - |
retryCount |
错误重试次数 | number | - |
onBefore |
请求前触发的生命周期函数 | function | - |
onSuccess |
请求成功触发的生命周期函数 | function | - |
onError |
请求失败触发的生命周期函数 | funciton | - |
onFinally |
请求完成触发的生命周期函数 | function | - |
useRequest<R extends object, P extends any[]>
参数 | 说明 | 类型 |
---|---|---|
data |
返回的结果值 | Ref<R> |
error |
错误返回结果 | Ref<Error> |
loading |
loading 状态 | Ref<boolean> |
params |
当前传入参数 | P |
run |
错误返回结果 | (...args:P)=>R |
refresh |
使用上一次的 params 请求参数进行重新请求 | (...args:P)=>R |
mutate |
修改 data 的 值 | unknow |
unmount |
结束生命周期时调用函数,清除定时器等 | ()=>void |
cancel |
取消函数 | ()=>void |