useRequest

Production-ready Vue Hook to manage asynchronous data.

The API is different from ahooks.

Examples

Basic usage

Manual trigger

Polling

  • You can set options.pollingWhenHidden=false to temporarily suspend the scheduled task when the screen is not visible.
  • Use run / cancel to start / stop polling.
  • When options.manual=true, you need to call the run function to start the polling
  • When options.pollingSinceLastFinished=false, request will start every pollingInterval time, not waitting last request finished.

Debounce

  • When options.loadingWhenDebounceStart=false, loading will not be true immediately, wait until the function actually executes.

Throttle

Loading Delay

Basic API

const {
  data,
  error,
  loading,
  run,
  params,
  cancel,
  refresh,
  fetches,
  lastSuccessParams,
} = useRequest(service, {
  formatResult,
  manual,
  onSuccess,
  onError,
  defaultLoading,
  loadingDelay,
  defaultParams,
  pollingInterval,
  pollingWhenHidden,
  pollingSinceLastFinished,
  refreshOnWindowFocus,
  focusTimespan,
  debounceInterval,
  loadingWhenDebounceStart,
  throttleInterval,
  initialData,
  requestMethod,
  ready,
  throwOnError,
  refreshDeps, // v0.9
  refreshOnWindowFocus, // v0.9
});

Result

PropertyDescriptionType
data
  • Data returned by the service。
  • If formatResult is set, the data will be the return of formatResult.
undefined / any
errorexception thrown by service, default is undefinedundefined / Error
loadingWhether the service is loadedboolean
run
  • Manually trigger the service execution. Its parameters will be passed to the service function.
  • In Debounce or Throttle mode, will return Promise<null>
(...args: any[]) => Promise
paramsAn array of parameters for the service being executed. For example, you triggered run (1, 2, 3), then params is equal to [[1, 2, 3]any[]
lastSuccessParamsAssigned onlt when last service successany[]
cancel
  • Cancel the current running request
  • This will also stop the polling.
() => void
refreshUsing the last params, re-execute the service() => Promise

Params

All Options are optional.

PropertyDescriptionTypeDefault
manual
  • The default false. That is, the service is automatically executed during initialization.
  • If set to true, you need to call run manually to trigger execution.
booleanfalse
initialDatainitial dataany-
formatResultFormat request results(response: any) => any-
onSuccess
  • Triggered when the service resolved, the parameters are data andparams
  • If formatResult is present,data is the formatted data.
(data: any, params: any[]) => void-
onErrorTriggered when the service reports an error. The parameters are error andparams.(error: Error, params: any[]) => void-
defaultParamsIf manual = false, the default parameters when run is executed automatically,any[]-
loadingDelaySet delay time for display loading to avoid flickernumber-
pollingIntervalPolling interval in milliseconds. After setting, it will enter polling mode and trigger run periodically.number-
pollingSinceLastFinished
  • Whether start next polling request since last request finished. Default is true.
  • If set false, request will start every pollingInterval time.
booleantrue
pollingWhenHidden
  • Whether to continue polling when the page is hidden. Default is true, that is, polling will not stop
  • If set to false, polling is temporarily stopped when the page is hidden, and the last polling is continued when the page is redisplayed
booleantrue
debounceIntervaldebounce interval, the unit is millisecond. After setting, request to enter debounce mode.number-
loadingWhenDebounceStartWhether set loading to true when the run function starts to execute.booleantrue
throttleIntervalthrottle interval, the unit is millisecond. After setting, request to enter throttle mode.number-
throwOnErrorIf the service errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: truebooleanfalse
refreshOnWindowFocus v0.9The request will be re-initiated when the screen is refocused or revisible.booleanfalse
refreshDeps v0.9RefreshDeps changes will trigger the service to re-execute.WatchSource[][]

最近更新: