Watching Request

Strategy type

use hook

In scenarios where you need to re-request as data changes — such as pagination, filtering, fuzzy search, or switching tabs — you can use useWatcher to watch a state and send a request as soon as it changes.

Example

Let's use searching for todo items as an example: change the options in the dropdown and watch the todo list update.

vue

<template>
  <select v-model="userId">
    <option :value="1">User 1</option>
    <option :value="2">User 2</option>
    <option :value="3">User 3</option>
  </select>

  <!-- Render the filtered todo list -->
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li
      v-for="todo in data"
      :key="todo.id">
      {{ todo.completed ? '(Completed)' : '' }}{{ todo.title }}
    </li>
  </ul>
</template>

<script setup>
import { useWatcher } from 'alova/client';
import { ref } from 'vue';
import { alovaInstance } from './api';

// Create method instance
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};
const userId = ref(1);
const { loading, data, error } = useWatcher(
  // Must be set to a function that returns a method instance
  () => filterTodoList(userId.value),

  // The monitored status array, these status changes will trigger a request
  [userId]
);
</script>

Open Sandbox

react

import { useWatcher } from 'alova/client';
import { useState } from 'react';
import { alovaInstance } from './api';

//Create method instance
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};

const App = () => {
  const [userId, setUserId] = useState(1);
  const { loading, data = [] } = useWatcher(
    // Must be set to a function that returns a method instance
    () => filterTodoList(userId),

    // The monitored status array, these status changes will trigger a request
    [userId]
  );

  return (
    <>
      <select
        value={userId}
        onChange={e => setUserId(e.target.value)}>
        <option value={1}>User 1</option>
        <option value={2}>User 2</option>
        <option value={3}>User 3</option>
      </select>

      {/* Render the filtered todo list */}
      {loading ? <div>Loading...</div> : null}
      {!loading ? (
        <ul>
          {data.map(todo => (
            <li>
              {todo.completed ? '(Completed)' : ''}
              {todo.title}
            </li>
          ))}
        </ul>
      ) : null}
    </>
  );
};
export default App;

Open Sandbox

svelte

<script>
import { useWatcher } from 'alova/client';
import { writable } from 'svelte/store';

//Create method instance
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};
const userId = writable(0);
const { loading, data, error } = useWatcher(
  // Parameters must be set to functions that return method instances
  () => filterTodoList($userId),

  // The monitored status array, these status changes will trigger a request
  [userId]
);
</script>

<select bind:value="{$userId}">
  <option value="{1}">User 1</option>
  <option value="{2}">User 2</option>
  <option value="{3}">User 3</option>
</select>

<!-- Render the filtered todo list -->
{#if $loading}
<div>Loading...</div>
{:else}
<ul>
  {#each $data as todo}
    <li class="todo-title">{ todo.completed ? '(Completed)' : '' }{ todo.title }</li>
  {/each}
</ul>
{/if}

solid

import { useWatcher } from 'alova/client';
import { createSignal } from 'react';
import { alovaInstance } from './api';

//Create method instance
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};

const App = () => {
  const [userId, setUserId] = createSignal(1);
  const { loading, data } = useWatcher(
    // Must be set to a function that returns a method instance
    () => filterTodoList(userId),

    // The monitored status array, these status changes will trigger a request
    [userId],
    {
      initialData: []
    }
  );

  return (
    <>
      <select
        value={userId()}
        onChange={e => setUserId(e.target.value)}>
        <option value={1}>User 1</option>
        <option value={2}>User 2</option>
        <option value={3}>User 3</option>
      </select>

      {/* Render the filtered todo list */}
      {loading() ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {data().map(todo => (
            <li>
              {todo.completed ? '(Completed)' : ''}
              {todo.title}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};
export default App;

Open Sandbox

Usage

Usage Tips

useWatcher supports all the features of useRequest. For details, please see useRequest. The following are the unique uses of useWatcher.

Send request immediately

Unlike useRequest, the immediate property of useWatcher defaults to false.

const { send } = useWatcher(() => getTodoList(currentPage), [currentPage], {
  immediate: true
});
send();

Request debounce

Usually you would debounce at the event level. Here, debouncing happens at the request level, so you no longer need to debounce the fuzzy-search input yourself — and the usage stays simple.

What is debounce?

Debounce means that after an event is triggered, a function can only be executed once within n seconds. If another event is triggered within n seconds after the event is triggered, the function execution delay time will be recalculated (distinguished from throttling here. Throttling means that the event cannot be triggered again within a period of time after the event is triggered)

Set the debounce for all watching states

const { loading, data, error } = useWatcher(
  () => filterTodoList(keyword, date),
  [keyword, date],
  {
    // Setting debounce to a number means the debounce time for all watching states in milliseconds
    // For example, this means that when one or more of the states keyword and date change, the request will be sent after 500ms
    debounce: 500
  }
);

Set the debounce for a single watching state

In many scenarios, we only need to debounce a few frequently changing watching states, such as the state change triggered by onInput of the text box. This can be done as follows:

const { loading, data, error } = useWatcher(
  () => filterTodoList(keyword, date),
  [keyword, date],
  {
    // Set the debounce time in the order of the array of watching states. 0 or no transmission means no debounce
    // The order of the watching states here is [keyword, date], and the debounce array is set to [500, 0], which means that only the keyword is set to debounce
    debounce: [500, 0]
    // You can also set it as follows:
    // debounce: [500],
  }
);

Request sequence

Sometimes a watched state changes repeatedly and triggers a series of requests. A later request may respond before an earlier one, and when the earlier one finally responds it overwrites the later result, leaving data that no longer matches the state. For example, suppose state changes and fires request 1; then it changes again before request 1 responds and fires request 2. If request 1 returns after request 2, the final data will be request 1's. This is why we added the abortLast parameter: when the next request is sent, it cancels the previous unresponded request. It defaults to true, so only the latest useWatcher request stays valid.

useWatcher(
  () => getTodoList($currentPage),
  // Array of watched states, these state changes will trigger a request
  [state],
  {
    abortLast: true // Whether to interrupt the last unresponsive request, the default is true
  }
);

Notes

abortLast defaults to true. Under normal circumstances, you don't need to pay attention to this parameter. If it is changed to false, it may cause problems with state and response mismatch.

API

Please refer to API-useWatcher.