17858274056 / vue-hooks

base vue3 hooks

hooks 工具库

下载

$ npm install keylion-hooks

useRequest

与请求库无关，支持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