Watching Request

Strategy type

use hook

In some scenarios where you need to re-request as data changes, such as paging, data filtering, fuzzy search, tab bar switching, etc., you can use useWatcher to listen to the specified state change and send a request immediately.

Example

Next, let's take the search for todo items as an example and try to change the options in the selection box to see how the todo list changes.

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 we write debounce code at the level of frequently triggered events. This time we implemented the debounce function at the request level, which means you no longer need to implement debounce yourself in the fuzzy search function, and the usage is also very 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 when the state watched by useWatcher changes continuously and causes continuous requests to be initiated, the latter request gets a response before the previous request, but when the previous request gets a response, it will overwrite the response of the latter request, resulting in a response that does not match the state; for example, if a state state changes and request 1 is issued, and then the state value is changed before request 1 is responded, and request 2 is issued, if request 1 returns after request 2, the final response data will remain in request 1. Therefore, we designed the abortLast parameter, which is used to mark whether to interrupt the last unresponsive request when the next request is sent. The default value is true, so that only the last request sent by useWatcher is 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.