监听请求

策略类型

use hook

在一些需要随数据变化而重新请求的场景下，如分页、数据筛选、模糊搜索、tab 栏切换等，可以使用useWatcher 来监听指定的状态变化时立即发送请求。

示例

接下来我们以搜索 todo 项为例，尝试改变选择框中的选项，看看 todo 列表是如何变化的。

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>

  <!-- 渲染筛选后的todo列表 -->
  <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';

// 创建method实例
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};
const userId = ref(1);
const { loading, data } = useWatcher(
  // 必须设置为返回method实例的函数
  () => filterTodoList(userId.value),

  // 被监听的状态数组，这些状态变化将会触发一次请求
  [userId]
);
</script>

Open Sandbox

react

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

// 创建method实例
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};

const App = () => {
  const [userId, setUserId] = useState(1);
  const {
    loading,
    data = [],
    error
  } = useWatcher(
    // 必须设置为返回method实例的函数
    () => filterTodoList(userId),

    // 被监听的状态数组，这些状态变化将会触发一次请求
    [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>

      {/* 渲染筛选后的todo列表 */}
      {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';

// 创建method实例
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};
const userId = writable(0);
const { loading, data, error } = useWatcher(
  // 参数必须设置为返回method实例的函数
  () => filterTodoList($userId),

  // 被监听的状态数组，这些状态变化将会触发一次请求
  [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>

<!-- 渲染筛选后的todo列表 -->
{#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 'solid-js';
import { alovaInstance } from './api';

// 创建method实例
const filterTodoList = userId => {
  return alovaInstance.Get(`/users/${userId}/todos`);
};

const App = () => {
  const [userId, setUserId] = createSignal(1);
  const { loading, data } = useWatcher(
    // 必须设置为返回method实例的函数
    () => filterTodoList(userId()),

    // 被监听的状态数组，这些状态变化将会触发一次请求
    [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>

      {/* 渲染筛选后的todo列表 */}
      {loading() ? (
        <div>Loading...</div>
      ) : (
        <ul>
          {data().map(todo => (
            <li>
              {todo.completed ? '(Completed)' : ''}
              {todo.title}
            </li>
          ))}
        </ul>
      )}
    </>
  );
};
export default App;

Open Sandbox

使用

用法提示

useWatcher 支持 useRequest 的所有功能，详情请查看 useRequest。以下是 useWatcher 特有的用法。

立即发送请求

与useRequest不同的是，useWatcher的immediate属性默认是false。

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

请求防抖

通常我们都会在频繁触发的事件层面编写防抖代码，这次我们在请求层面实现了防抖功能，这意味着你再也不用在模糊搜索功能中自己实现防抖了，用法也非常简单。

什么是防抖

防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间（在这里和节流区分一下，节流是在触发完事件之后的一段时间之内不能再次触发事件）

设置所有监听状态的防抖时间

const { loading, data, error } = useWatcher(
  () => filterTodoList(keyword, date),
  [keyword, date],
  {
    // 设置debounce为数字时表示为所有监听状态的防抖时间，单位为毫秒
    // 如这边表示当状态keyword、date的一个或多个变化时，将在500ms后才发送请求
    debounce: 500
  }
);

为单个监听状态设置防抖时间

很多场景下，我们只需要对某几个频繁变化的监听状态进行防抖，如文本框的onInput触发的状态变化，可以这样做：

const { loading, data, error } = useWatcher(
  () => filterTodoList(keyword, date),
  [keyword, date],
  {
    // 以监听状态的数组顺序分别设置防抖时间，0或不传表示不防抖
    // 这边监听状态的顺序是[keyword, date]，防抖数组设置的是[500, 0]，表示只对keyword单独设置防抖
    debounce: [500, 0]
    // 也可以这么按如下设置:
    // debounce: [500],
  }
);

请求时序

有时候当useWatcher监听的状态发生连续的改变导致连续的请求的发起时，后一次的请求先于前一次的请求获得响应，但是当前一次请求获得响应时，会覆盖后一次请求的响应，导致获取到与状态不匹配的响应；例如说有个状态state改变后发出了请求1，然后在请求1还未响应时又改变了state值，并发出了请求2，如果请求1后于请求2返回，最终的响应数据会维持在请求1。 所以我们设计了abortLast参数，它用于标记当下一次请求发出时，是否中断上一次的未响应请求，默认为true，这样useWatcher所发出的请求只有最后一次有效。

useWatcher(
  () => getTodoList($currentPage),
  // 被监听的状态数组，这些状态变化将会触发一次请求
  [state],
  {
    abortLast: true // 是否中断上一次的未响应请求，默认为true
  }
);

注意事项

abortLast默认为true，在正常情况下你不需要关注这个参数，如果修改为false，可能会导致状态与响应不匹配的问题。

API

请查看API-useWatcher。