Keylion-hooks NPM

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