zot-request v1.0.6

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

Options

轮询

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
})