Skip to main content
Version: v2

Core useHooks

useRequest

Represents the sending of a request. When executing useRequest, a request will be sent by default, and stateful request-related data will be created and maintained, such as loading/data/error, etc. It is the most commonly used method when obtaining initial data on the page. It also supports turning off its default request sending, which is very useful in request scenarios triggered by click events such as submitting data.

Go to Send Request for details.

type

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

Parameters

  1. methodHandler: can be passed in two forms: method instance and function. When specified as a function, it can receive parameters passed in by send and require a method instance to be returned.
  2. config: hook configuration parameters.
NameDescriptionTypeDefaultVersion
immediateWhether to initiate the request immediatelybooleantrue-
initialDataThe initial data value. The data value is the initial value before the first response. If it is not set, it is undefinedany--
forceWhether to force the request, it can be set to the function to dynamically return a boolean valueboolean | (...args: any[]) => boolean | false--
managedStatesAdditional managed states, which can be updated via updateStateRecord<string |number | symbol, any>--
middlewareMiddleware function, Understanding alova middleware(context: AlovaFrontMiddlewareContext, next: AlovaGuardNext) => Promise<any\ >--

AlovaFrontMiddlewareContext

NameDescriptionTypeVersion
methodThe method object of the current requestMethod-
cachedResponseHit cached dataany-
configCurrent use hook configurationRecord<string, any>-
sendArgsParameters of the response processing callback, which are passed in by send of use hooksany[]-
frontStatesuse hook front-end state collection, such as data, loading, error, etc.FrontRequestState-
sendSend request function(...args: any[]) => Promise-
abortabort function() => void-
decorateSuccessDecorate success callback function(decorator: (
handler: (event: AlovaSuccessEvent) => void,
event: AlovaSuccessEvent,
index: number,
length: number
) => void) => void
-
decorateErrorDecoration failure callback function(decorator: (
handler: (event: AlovaErrorEvent) => void,
event: AlovaErrorEvent,
index: number,
length: number
) => void) => void
-
decorateCompleteDecoration completion callback function(decorator: (
handler: (event: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent,
index: number,
length: number
) => void) => void
-
updateFunction to update the current use hook front-end state, more useful in react(newFrontStates: FrontRequestState) => void;-
controlLoadingCustomize the loading state of the control. The call will no longer trigger changes in the loading state. When the incoming control is false, the control will be cancelled.(control?: boolean) => void-

AlovaGuardNext

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

FrontRequestState

The following attribute values will automatically infer the responsive data type of the corresponding UI framework based on statesHook, which is the Ref type in vue3, the normal value in react, and the Writable type in svelte

NameDescriptionTypeVersion
loadingrequest loading statusboolean-
dataresponse dataany-
errorRequest error informationError | undefined-
downloadingDownload progress informationObject-
uploadingUpload progress informationObject-

AlovaSuccessEvent

NameDescriptionTypeVersion
methodThe method object of the current requestMethod-
sendArgsParameters of the response processing callback, which are passed in by send of use hooksany[]-
dataresponse dataany-
fromCacheWhether the response data comes from cacheboolean-

AlovaErrorEvent

NameDescriptionTypeVersion
methodThe method object of the current requestMethod-
sendArgsParameters of the response processing callback, which are passed in by send of use hooksany[]-
errorResponse error instanceError-

AlovaCompleteEvent

NameDescriptionTypeVersion
methodThe method object of the current requestMethod-
sendArgsParameters of the response processing callback, which are passed in by send of use hooksany[]-
statusResponse status, success when successful, error when failure'success' | 'error'-
dataresponse data, with value when successfulany-
fromCacheWhether the response data comes from the cache, a value if successfulboolean-
errorResponse error instance, with value in case of failureError-

return value

UseHookReturnType contains response data and request-related states, operation functions and event binding functions. They will automatically infer the responsive data type of the corresponding UI framework based on statesHook, which is the Ref type in vue3 and the Ref type in react. It is a normal value and is of Writable type in svelte.

Responsive data

NameDescriptionTypeVersion
loadingrequest loading statusboolean-
dataresponse dataany-
errorRequest error informationError | undefined-
downloadingDownload progress informationObject-
uploadingUpload progress informationObject-

Operation function

namedescriptionfunction parametersreturn valueversion
sendSend request function...args: any[]--
abortabort function-Promise-
updateFunction to update the current use hook front-end state, more useful in reactnewFrontStates: FrontRequestState-

event

namedescriptioncallback parametersversion
onSuccessRequest success event bindingevent: AlovaSuccessEvent-
onErrorRequest error event bindingevent: AlovaErrorEvent-
onCompleteRequest completion event bindingevent: AlovaCompleteEvent-

useWatcher

Monitor the status and initiate a request after the status changes. In some scenarios that require re-requesting as the data changes, such as paging, data filtering, and fuzzy search.

Go to State Change Request for details.

type

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

Parameters

  1. handler: can be passed in two forms: method instance and function. When specified as a function, it can receive parameters passed in by send and require a method instance to be returned.
  2. config: hook configuration parameters.
NameDescriptionTypeDefaultVersion
immediateWhether to initiate the request immediatelybooleantrue-
initialDataThe initial data value. The data value is the initial value before the first response. If it is not set, it is undefinedany--
forceWhether to force the request, it can be set to the function to dynamically return a boolean valueboolean | (...args: any[]) => boolean | false
managedStatesAdditional managed states, which can be updated via updateStateRecord<string | number | symbol, any>-
debounceRequest debounce time (milliseconds), when passing in the array, you can set the debounce time individually in the order of watchingStatesnumber | number[]-
middlewareMiddleware function, Understanding alova middleware(context: AlovaFrontMiddlewareContext, next: AlovaGuardNext) => Promise<any\ >--
sendableWhether to send a request when the monitored state changes(methodInstance: AlovaEvent) => boolean() => true-
abortLastWhether to abort the last unresponsive requestbooleantrue-

return value

UseHookReturnType contains response data and request-related states, operation functions and event binding functions. They will automatically infer the responsive data type of the corresponding UI framework based on statesHook. It is Ref type in vue3 and ordinary value in react. In svelte it is Writable type.

Responsive data

NameDescriptionTypeVersion
loadingrequest loading statusboolean-
dataresponse dataany-
errorRequest error informationError | undefined-
downloadingDownload progress informationObject-
uploadingUpload progress informationObject-

Operation function

namedescriptionfunction parametersreturn valueversion
sendSend request function...args: any[]Promise-
abortabort function---
updateFunction to update the current use hook front-end state, more useful in reactnewFrontStates: FrontRequestState-

event

namedescriptioncallback parametersversion
onSuccessRequest success event bindingevent: AlovaSuccessEvent-
onErrorRequest error event bindingevent: AlovaErrorEvent-
onCompleteRequest completion event bindingevent: AlovaCompleteEvent-

useFetcher

It is used to pull data through useFetcher, which is useful when preloading data and updating status across modules.

Go to Data Fetching to view details.

type

function useFetcher(config?: FetcherHookConfig): UseFetchHookReturnType;

Parameters

  1. config: hook configuration parameters.
NameDescriptionTypeDefaultVersion
forceWhether to force the request, it can be set to the function to dynamically return a boolean valueboolean(...args: any[]) => boolean | false-
middlewareMiddleware function, Understand alova middleware(context: AlovaFetcherMiddlewareContext, next: AlovaGuardNext) => Promise<any\ >--

AlovaFetcherMiddlewareContext

NameDescriptionTypeVersion
methodThe method object of the current requestMethod-
cachedResponseHit cached dataany-
configCurrent use hook configurationRecord<string, any>-
fetchArgsParameters of the response processing callback, which are passed in by fetch of useFetcherany[]-
fetchStatesuse hook preload state collection, such as fetching, error, etc.FetchRequestState-
fetchData preloading function(method: Method, ...args: any[]) => Promise-
abortabort function() => void-
decorateSuccessDecorate success callback function(decorator: (
handler: (event: AlovaSuccessEvent) => void,
event: AlovaSuccessEvent,
index: number,
length: number
) => void) => void
-
decorateErrorDecoration failure callback function(decorator: (
handler: (event: AlovaErrorEvent) => void,
event: AlovaErrorEvent,
index: number,
length: number
) => void) => void
-
decorateCompleteDecoration completion callback function(decorator: (
handler: (event: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent,
index: number,
length: number
) => void) => void
-
updateFunction to update the current use hook preloading state, more useful in react(newFrontStates: FetchRequestState) => void;-
controlFetchingAfter calling, the state of fetching will be customized and the change of fetching state will no longer be triggered internally. When the incoming control is false, the control will be canceled(control?: boolean) => void-

FetchRequestState

The following attribute values will automatically infer the responsive data type of the corresponding UI framework based on statesHook, which is the Ref type in vue3, the normal value in react, and the Writable type in svelte

NameDescriptionTypeVersion
fetchingpreloading request statusboolean-
errorRequest error informationError | undefined-
downloadingDownload progress informationObject-
uploadingUpload progress informationObject-

return value

UseFetchHookReturnType contains request-related states, operation functions and event binding functions. They will automatically infer the responsive data type of the corresponding UI framework based on statesHook. It is Ref type in vue3, ordinary value in react, and ordinary value in svelte. For Writable type.

Responsive data

NameDescriptionTypeVersion
fetchingpreloading request statusboolean-
errorRequest error informationError | undefined-
downloadingDownload progress informationObject-
uploadingUpload progress informationObject-

Operation function

namedescriptionfunction parametersreturn valueversion
fetchData preloading function1. method: preloaded Method instance
2. ...args: any[]
Promise-
abortabort function---
updateFunction to update the current use hook front-end state, more useful in reactnewFrontStates: FrontRequestState-

event

namedescriptioncallback parametersversion
onSuccessRequest success event bindingevent: AlovaSuccessEvent) => void,
event: AlovaCompleteEvent
-
onErrorRequest error event bindingevent: AlovaErrorEvent) => void,
event: AlovaCompleteEvent
-
onCompleteRequest completion event bindingevent: AlovaCompleteEvent) => void,
event: AlovaCompleteEvent
-