ZotRequest

useRequest

基本用法

const fetchData = (param: any) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        time: new Date().toLocaleString(),
        param: param,
        data: Math.random()
      })
    }, 500)
  })
}

const { data, params, loading, run, refresh } = useRequest(fetchData)

API

export interface IResult<T> {
  /** 是否成功 */
  success: boolean
  /** 数据 */
  data: T
  /** 消息 */
  message?: string
  /** 其他信息 */
  [key: string]: any
}

const {
  loading: boolean,
  data?: TData,
  params: TParams || [],
  run: (...params: TParams) => void,
  runAsync: (...params: TParams) => Promise<IResult<TData>>,
  refresh: () => void,
  refreshAsync: () =>Promise<IResult<TData>>,
  mutate: (data?: TData | ((oldData?: TData) => (TData | undefined))) => void,
  cancel: () => void,
} = useRequest<TData, TParams>(
  // service 请求返回的结果必须为 IResult 格式
  service: (...args: TParams) =>Promise<IResult<TData>>,
  {
    auto?: boolean,
    defaultParams?: TParams,
    onBefore?: (params: TParams) => void,
    onSuccess?: (result: IResult<TData>, params: TParams) => void,
    onFail?: (result: IResult<TData>, params: TParams) => void,
    onFinally?: (result: IResult<TData>, params: TParams) => void
  }
);

Result

| 参数 | 说明 | 类型 | | ------- | -------------------- | --------- | | data | service 返回的数据 | TData | | loading | service 是否正在执行 | boolean | | params | 当次执行的 service 的参数数组。比如你触发了 run(1, 2, 3)，则 params 等于 [1, 2, 3] | TParams | | run | 手动触发 service 执行，参数会传递给 service 异常自动处理，通过 onFail 反馈 | boolean | | runAsync | 与 run 用法一致，但返回的是 Promise ，需要自行处理异常。 | (...params: TParams) => Promise<IResult<TData>> | | refresh | 使用上一次的 params，重新调用 run | () => void | | refreshAsync | 使用上一次的 params，重新调用 runAsync | () => Promise<IResult<TData>> | | mutate | 直接修改 data | (data?: TData / ((oldData?: TData) => (TData / undefined))) => void | | cancel | 忽略当前 Promise 的响应 | ()=>void |

Options

| 参数 | 说明 | 类型 | 默认值 | | ------- | -------------------- | --------- | --- | | auto | 自动请求, 即在初始化时自动执行 service。 | boolean | false| | defaultParams | 首次默认执行时，传递给 service 的参数 | TParams | - | | onBefore | service 执行前触发 | (params: TParams) => void | -| | onSuccess | service 返回结果 result.success 为true时候触发 | (res: IResult<TData>, params: TParams) => void | -| | onFail | service 返回结果 result.success 不为true时候触发 | (res: IResult<TData>, params: TParams) => void | -| | onFinally | service 执行完成时触发 | (res: IResult<TData>, params: TParams) => void | -|

轮询

pollingInterval 每隔 x ms 自动调用refresh刷新数据

{
  /** 轮询时间  每隔 x ms 自动调用refresh刷新数据  */
  pollingInterval?: number
  /** 轮询时间最大失败重试次数，超过次数停止轮询， 默认-1   */
  pollingErrorRetryCount?: number
}


const { data, loading, run } = useRequest(fetchData, {
  pollingInterval: 10000,
  pollingErrorRetryCount: -1
})

防抖

// options
{
  /** 防抖等待时间, 单位为毫秒，设置后，进入防抖模式 */
  debounceWait?: number
  /** 在延迟开始前执行调用 默认false*/
  debounceLeading?: boolean
  /** 在延迟结束后执行调用 默认true */
  debounceTrailing?: boolean
  /** 允许被延迟的最大值 */
  debounceMaxWait?: number
}


const { data, loading, run } = useRequest(fetchData, {
  debounceWait: 500,
})

节流

// options
{
  /** 节流等待时间, 单位为毫秒，设置后，进入节流模式 */
  throttleWait?: number
  /** 在节流开始前执行调用 默认 true */
  throttleLeading?: boolean
  /** 在节流结束后执行调用 默认 true */
  throttleTrailing?: boolean
}

const { data, loading, run } = useRequest(fetchData, {
  throttleWait: 500,
})

缓存

• staleTime 缓存时间默认10分钟

export interface CachedData<TData = any, TParams = any> {
  // 请求数据
  data: TData
  // 请求参数
  params: TParams
}

export interface RecordData<TData = any, TParams = any> extends CachedData<TData, TParams> {
  // 过期时间
  expiredTime: number | null
}
// options
{
  /**  缓存key, 相同key会同步更新 */
  cacheKey?: string
  /** 缓存时间ms, -1 为永久缓存 */
  staleTime?: number
  /** 是否根据params生成缓存key */
  cacheKeyWithParams?: boolean
  /** 自定义设置缓存 */
  setCache?: (data: CachedData<TData, TParams>) => void
  /** 自定义获取缓存 */
  getCache?: (key: string, params: TParams) => RecordData<TData, TParams> | undefined
}

const { data, loading, run } = useRequest(fetchData, {
  cacheKey: 'test',
  staleTime: -1,
  cacheKeyWithParams: true
})

防止闪烁

{
  /** 防止闪烁 响应时间少于 loadingDelay 不展示loading */
  loadingDelay
}


const { data, loading, run } = useRequest(fetchData, {
  loadingDelay: 100
})