异步类 Hooks

@mbjia/hooks

异步类 Hooks

用于处理请求、轮询、防重复提交和异步锁。

适合处理请求、轮询、防重复提交和异步锁。

useFetch

封装带取消能力的异步请求。

const useFetch = <Payload, Data>(
  fetcher: (
    payload: Payload,
    prevData: Data | undefined,
    source: CancelTokenSource
  ) => Promise<Data>,
  cancelMessage?: string,
  defaultLoading?: boolean
) => [state, dispatch]

入参：

参数	类型	必填	默认值	说明
fetcher	(payload, prevData, source) => Promise<Data>	是	-	请求处理函数。
cancelMessage	string	否	-	组件卸载或请求切换时取消请求的提示。
defaultLoading	boolean	否	-	初始 loading 状态。

返回：

{
  data: Data | undefined
  error: Error | undefined
  isLoading: boolean | undefined
  hasError: boolean
  fetchData: { id: number; payload?: Payload }
}

返回值：

字段	类型	说明
state.data	Data | undefined	请求结果。
state.error	Error | undefined	错误对象。
state.isLoading	boolean | undefined	是否加载中。
state.hasError	boolean	是否有错误。
state.fetchData	{ id: number; payload?: Payload }	当前请求触发信息。
dispatch	(payloadOrFactory, resetData?) => void	触发请求。

示例：

const [state, fetchList] = useFetch(async (payload) => {
  return await reqAssetItems(payload)
})

fetchList({ page: 1, page_size: 20, asset_cate: 1, asset_type: [50, 51] })

useLazyCallback

防止重复提交，并延迟显示 loading。

const [loading, submit] = useLazyCallback(apiFn, 300, false)

apiFn 必须返回 Promise。

参数	类型	默认值	说明
apiFn	(...args) => Promise<any>	-	异步函数。
delay	number	300	延迟多少毫秒显示 loading。
defaultLoading	boolean	false	初始 loading。

返回值	类型	说明
loading	boolean	是否 loading。
submit	apiFn 同签名	带锁和延迟 loading 的提交函数。

useLockFn

防止异步函数并发执行。

const save = useLockFn(async () => {
  await api.save()
})

参数	类型	说明
fn	(...args) => Promise<V>	需要防并发的异步函数。

返回一个同参数的异步函数。如果上一次还没结束，再次调用会直接返回。

useInterval

useInterval(callback, delay, immediately)

• delay=null 表示停止。
• immediately=true 会立即执行一次。

参数	类型	说明
callback	() => void	定时执行函数。
delay	number | null	间隔时间；为 null 时停止。
immediately	boolean	是否立即执行一次。