Skip to main content

useWatcher with serial

policy type

use hook

Before using extension hooks, make sure you are familiar with the basic usage of alova.

Status update triggers a set of serial requests, which is more concise and easy to use than serial request in best practice, with unified loading status, error, and callback functions.


  • ✨ A more concise and easy-to-use serial method;
  • ✨Unified request status and callback function;
  • ✨Status update triggers serial execution of multiple requests;


serial request


# npm
npm install @alova/scene-vue --save
yarn add @alova/scene-vue


Basic usage

Same usage as useWatcher, except that the first parameter is changed to an array of handlers executed serially, and each handler will receive the response data of the previous request.

const {
// Serial loading status, all requests will be changed to false

// The response data of the last request

// Any request error will record the error message here

// Manually send a serial request

// serial request success callback binding function

// Serial request error callback binding function, any request error will trigger it

// Serial request completion callback binding function
} = useSerialWatcher(
// args is the parameter passed in by the send function
(...args) => request1(args),

// Starting from the second handler, the first parameter is the response data of the previous request, and args is received from the second
(response1, ...args) => request2(response1, args),
(response2, ...args) => request3(response2, args)
[watchedState1, watchedState2],
immediate: true

// Manually trigger the request and pass parameters
send(1, 2, 3);

It is worth noting that the first item in the handler array can also be specified as a method instance, and the second item must be a function.

(response1, ...args) => request2(response1, args),
(response2, ...args) => request3(response2, args)

Request error

When any of the serial requests is wrong, onError will be triggered, and its event.method will point to the method instance of the request error.


Hook configuration

Inherit all configurations of useWatcher.

Responsive data

Inherit all responsive data from useWatcher.

Action function

Inherit all action functions of useWatcher.


Inherit all events from useWatcher.