跳到主要内容
版本:v2

核心useHooks

useRequest

表示一次请求的发送,执行 useRequest 时默认会发送一次请求,并创建和维护状态化的请求相关数据,如loading/data/error等。在页面获取初始数据时是最常用的方法,同时也支持关闭它的默认的请求发送,这在提交数据等通过点击事件触发的请求场景非常有用。

前往useRequest查看详情。

类型

function useRequest(
methodHandler: Method | (...args: any[]) => Method<S, E, R, T, RC, RE, RH>,
config?: RequestHookConfig
): UseHookReturnType;

参数

  1. methodHandler: 可传入 method 实例和函数两种形式,当指定为函数时的可接收send传入的参数,并要求返回一个 method 实例。
  2. config: hook 的配置参数。
名称描述类型默认值版本
immediate是否立即发起请求booleantrue-
initialData初始的 data 值,在首次响应前 data 值为初始值,未设置时为undefinedany--
force是否强制请求,可设置为函数动态返回 boolean 值boolean | (...args: any[]) => boolean | false--
managedStates额外的监管状态,可通过 updateState 更新Record<string |number | symbol, any>--
middleware中间件函数,了解 alova 中间件(context: AlovaFrontMiddlewareContext, next: AlovaGuardNext) => Promise<any>--

AlovaFrontMiddlewareContext

名称描述类型版本
method当前请求的 method 对象Method-
cachedResponse命中的缓存数据any-
config当前的 use hook 配置Record<string, any>-
sendArgs响应处理回调的参数,该参数由 use hooks 的 send 传入any[]-
frontStatesuse hook 前端状态集合,如 data、loading、error 等FrontRequestState-
send发送请求函数(...args: any[]) => voidPromise
abort中断函数() => void-
decorateSuccess装饰成功回调函数(decorator: (
handler: (event: AlovaSuccessEvent) => void,
event: AlovaSuccessEvent,
index: number,
length: number
) => void) => void
-
decorateError装饰失败回调函数(decorator: (
handler: (event: AlovaErrorEvent) => void,
event: AlovaErrorEvent,
index: number,
length: number
) => void) => void
-
decorateComplete装饰完成回调函数(decorator: (
handler: (event: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent,
index: number,
length: number
) => void) => void
-
update更新当前 use hook 前端状态的函数,在 react 中较有用(newFrontStates: FrontRequestState) => void;-
controlLoading将自定义控制 loading 的状态,调用内部不再触发 loading 状态的变更,传入 control 为 false 时将取消控制(control?: boolean) => void-

AlovaGuardNext

type AlovaGuardNext = (guardNextConfig?: {
force?: boolean | (...args: any[]) => boolean;
method?: Method;
}): Promise;

FrontRequestState

以下属性值将会根据statesHook自动推断出对应 UI 框架的响应式数据类型,在 vue3 中为Ref类型,在 react 中为普通值,在 svelte 中为Writable类型

名称描述类型版本
loading请求加载状态boolean-
data响应数据any-
error请求错误信息Error | undefined-
downloading下载进度信息Object-
uploading上传进度信息Object-

AlovaSuccessEvent

名称描述类型版本
method当前请求的 method 对象Method-
sendArgs响应处理回调的参数,该参数由 use hooks 的 send 传入any[]-
data响应数据any-
fromCache响应数据是否来自缓存boolean-

AlovaErrorEvent

名称描述类型版本
method当前请求的 method 对象Method-
sendArgs响应处理回调的参数,该参数由 use hooks 的 send 传入any[]-
error响应错误实例Error-

AlovaCompleteEvent

名称描述类型版本
method当前请求的 method 对象Method-
sendArgs响应处理回调的参数,该参数由 use hooks 的 send 传入any[]-
status响应状态,成功时为 success,失败时为 error'success' | 'error'-
data响应数据,成功时有值any-
fromCache响应数据是否来自缓存,成功时有值boolean-
error响应错误实例,失败时有值Error-

返回值

UseHookReturnType包含响应数据和请求相关的状态、操作函数和事件绑定函数,它们会根据statesHook自动推断出对应 UI 框架的响应式数据类型,在 vue3 中为Ref类型,在 react 中为普通值,在 svelte 中为Writable类型。

响应式数据

名称描述类型版本
loading请求加载状态boolean-
data响应数据any-
error请求错误信息Error | undefined-
downloading下载进度信息Object-
uploading上传进度信息Object-

操作函数

名称描述函数参数返回值版本
send发送请求函数...args: any[]--
abort中断函数-Promise-
update更新当前 use hook 前端状态的函数,在 react 中较有用newFrontStates: FrontRequestState-

事件

名称描述回调参数版本
onSuccess请求成功事件绑定event: AlovaSuccessEvent-
onError请求错误事件绑定event: AlovaErrorEvent-
onComplete请求完成事件绑定event: AlovaCompleteEvent-

useWatcher

监听状态,并在状态变化后发起请求,在一些需要随数据变化而重新请求的场景下,如分页、数据筛选、模糊搜索使用。

前往状态变化请求查看详情。

类型

function useWatcher(
handler: Method | (...args: any[]) => Method<S, E, R, T, RC, RE, RH>,
watchingStates: State[],
config?: WatcherHookConfig
): UseHookReturnType;

参数

  1. handler: 可传入 method 实例和函数两种形式,当指定为函数时的可接收send传入的参数,并要求返回一个 method 实例。
  2. config: hook 的配置参数。
名称描述类型默认值版本
immediate是否立即发起请求booleantrue-
initialData初始的 data 值,在首次响应前 data 值为初始值,未设置时为undefinedany--
force是否强制请求,可设置为函数动态返回 boolean 值boolean | (...args: any[]) => boolean | false
managedStates额外的监管状态,可通过 updateState 更新Record<string | number | symbol, any>-
debounce请求防抖时间(毫秒),传入数组时可按 watchingStates 的顺序单独设置防抖时间number | number[]-
middleware中间件函数,了解 alova 中间件(context: AlovaFrontMiddlewareContext, next: AlovaGuardNext) => Promise<any>--
sendable监听的状态改变时是否发送请求(methodInstance: AlovaEvent) => boolean() => true-
abortLast是否中断上一次的未响应请求booleantrue-

返回值

UseHookReturnType包含响应数据和请求相关的状态、操作函数和事件绑定函数,它们会根据 statesHook 自动推断出对应 UI 框架的响应式数据类型,在 vue3 中为 Ref 类型,在 react 中为普通值,在 svelte 中为 Writable 类型。

响应式数据

名称描述类型版本
loading请求加载状态boolean-
data响应数据any-
error请求错误信息Error | undefined-
downloading下载进度信息Object-
uploading上传进度信息Object-

操作函数

名称描述函数参数返回值版本
send发送请求函数...args: any[]Promise-
abort中断函数---
update更新当前 use hook 前端状态的函数,在 react 中较有用newFrontStates: FrontRequestState-

事件

名称描述回调参数版本
onSuccess请求成功事件绑定event: AlovaSuccessEvent-
onError请求错误事件绑定event: AlovaErrorEvent-
onComplete请求完成事件绑定event: AlovaCompleteEvent-

useFetcher

通过useFetcher用来拉取数据,在预加载数据和跨模块更新状态时很有用。

前往数据拉取查看详情。

类型

function useFetcher(config?: FetcherHookConfig): UseFetchHookReturnType;

参数

  1. config: hook 的配置参数。
名称描述类型默认值版本
force是否强制请求,可设置为函数动态返回 boolean 值boolean(...args: any[]) => boolean | false-
middleware中间件函数,了解 alova 中间件(context: AlovaFetcherMiddlewareContext, next: AlovaGuardNext) => Promise<any>--

AlovaFetcherMiddlewareContext

名称描述类型版本
method当前请求的 method 对象Method-
cachedResponse命中的缓存数据any-
config当前的 use hook 配置Record<string, any>-
fetchArgs响应处理回调的参数,该参数由 useFetcher 的 fetch 传入any[]-
fetchStatesuse hook 预加载状态集合,如 fetching、error 等FetchRequestState-
fetch数据预加载函数(method: Method, ...args: any[]) => voidPromise
abort中断函数() => void-
decorateSuccess装饰成功回调函数(decorator: (
handler: (event: AlovaSuccessEvent) => void,
event: AlovaSuccessEvent,
index: number,
length: number
) => void) => void
-
decorateError装饰失败回调函数(decorator: (
handler: (event: AlovaErrorEvent) => void,
event: AlovaErrorEvent,
index: number,
length: number
) => void) => void
-
decorateComplete装饰完成回调函数(decorator: (
handler: (event: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent,
index: number,
length: number
) => void) => void
-
update更新当前 use hook 预加载状态的函数,在 react 中较有用(newFrontStates: FetchRequestState) => void;-
controlFetching调用后将自定义控制 fetching 的状态,内部不再触发 fetching 状态的变更,传入 control 为 false 时将取消控制(control?: boolean) => void-

FetchRequestState

以下属性值将会根据statesHook自动推断出对应 UI 框架的响应式数据类型,在 vue3 中为Ref类型,在 react 中为普通值,在 svelte 中为Writable类型

名称描述类型版本
fetching预加载请求状态boolean-
error请求错误信息Error | undefined-
downloading下载进度信息Object-
uploading上传进度信息Object-

返回值

UseFetchHookReturnType包含请求相关的状态、操作函数和事件绑定函数,它们会根据 statesHook 自动推断出对应 UI 框架的响应式数据类型,在 vue3 中为 Ref 类型,在 react 中为普通值,在 svelte 中为 Writable 类型。

响应式数据

名称描述类型版本
fetching预加载请求状态boolean-
error请求错误信息Error | undefined-
downloading下载进度信息Object-
uploading上传进度信息Object-

操作函数

名称描述函数参数返回值版本
fetch数据预加载函数1. method: 预加载的 Method 实例
2. ...args: any[]
Promise-
abort中断函数---
update更新当前 use hook 前端状态的函数,在 react 中较有用newFrontStates: FrontRequestState-

事件

名称描述回调参数版本
onSuccess请求成功事件绑定event: AlovaSuccessEvent) => void,
event: AlovaCompleteEvent
-
onError请求错误事件绑定event: AlovaErrorEvent) => void,
event: AlovaCompleteEvent
-
onComplete请求完成事件绑定event: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent
-