上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useLoadingSlowFn

Tags:
Utilities
DepCollect
这个 Hook 自 v1.4.0 版本起可用。

一个类似于 useAsyncFn 的 React Hook，用于轻松处理缓慢加载状态。

演示

源码
Loading:
false
LoadingSlow:
false
Value:
click to fetch

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const { loadingSlow, ...useAsyncFnReturns } = useLoadingSlowFn(fn, options):

函数 Fn

返回 promise 的函数。

选项 Options

参见 UseAsyncFnOptions 了解更多详情。

export interface UseLoadingSlowFnOptions<T extends AnyFunc, D = Awaited<ReturnType<T>>, E = any>
  extends UseAsyncFnOptions<T, D, E> {
  /**
   * 确定加载是否缓慢的超时时长（毫秒）。
   *
   * @defaultValue 0 毫秒
   */
  loadingTimeout?: number
  /**
   * 加载缓慢时调用的回调函数。
   *
   * @defaultValue undefined
   */
  onLoadingSlow?: () => void
}

返回值

参见 UseAsyncFnReturns 了解更多详情。

export interface UseLoadingSlowFnReturns<T extends AnyFunc, D = Awaited<ReturnType<T>>, E = any>
  extends UseAsyncFnReturns<T, D, E> {
  /**
   * 是否加载缓慢。
   */
  loadingSlow: boolean
}