核心useHooks
useRequest
表示一次请求的发送,执行 useRequest 时默认会发送一次请求,并创建和维护状态化的请求相关数据,如loading/data/error
等。在页面获取初始数据时是最常用的方法,同时也支持关闭它的默认的请求发送,这在提交数据等通过点击事件触发的请求场景非常有用。
前往useRequest查看详情。
类型
function useRequest(
methodHandler: Method | (...args: any[]) => Method<S, E, R, T, RC, RE, RH>,
config?: RequestHookConfig
): UseHookReturnType;
参数
methodHandler
: 可传入 method 实例和函数两种形式,当指定为函数时的可接收send
传入的参数,并要求返回一个 method 实例。config
: hook 的配置参数。
名称 | 描述 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
immediate | 是否立即发起请求 | boolean | true | - |
initialData | 初始的 data 值,在首次响应前 data 值为初始值,未设置时为undefined | any | - | - |
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[] | - |
frontStates | use hook 前端状态集合,如 data、loading、error 等 | FrontRequestState | - |
send | 发送请求函数 | (...args: any[]) => void | Promise |
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 | - |