懒人版请求库alovajs教程5：使用useWatcher在状态改变时请求

alova是一个轻量级的请求策略库，旨在简化接口的管理和使用。它分为两部分：

1. 声明式实现复杂请求： 你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。

2. API自动管理和维护： 不用再自己编写请求函数，也不用再查阅API文档了，alova可帮你生成完整的、描述详尽的请求函数的TypeScript类型，让前端项目与服务器端无缝对接。当服务端API更新时，前端项目也会收到通知并阻止项目发布。

使用alovajs后，你只需要选择对应的useHook进行请求即可，被称为懒人版请求库，alova同时支持vue/react/svelte框架。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。

这里有很多可运行的demo

欢迎加入交流社区

有任何使用问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

• 加入在 Discord 社区参与交流
• 加入 QQ 频道社区参与交流

同时也欢迎贡献你的一份力量，请移步贡献指南。

接下来我们来看下alova根据状态变化自动发起请求的教程，想学习更多 alovajs 的用法，欢迎来alova 官网学习。

状态变化请求

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

看几个实际的例子

以下使用vue3实现

关键字搜索

接下来我们以关键字搜索 todo 项为例。

<template>
  <!-- keyword随着输入内容变化而变化 -->
  <input v-model="keyword" />

  <!-- 渲染筛选后的todo列表 -->
  <div v-if="loading">Loading...</div>
  <template v-else>
    <div v-for="todo in data">
      <div class="todo-title">{{ todo.title }}</div>
      <div class="todo-time">{{ todo.time }}</div>
    </div>
  </template>
</template>

<script setup>
  // 创建method实例
  const filterTodoList = keyword => {
    return alovaInstance.Get('/todo/list/search', {
      params: {
        keyword
      }
    });
  };
  const keyword = ref('');
  const {
    loading,
    data,
    error

    // 第一个参数必须为返回method实例的函数
  } = useWatcher(
    () => filterTodoList(keyword.value),

    // 被监听的状态数组，这些状态变化将会触发一次请求
    [keyword],
    {
      // 设置500ms防抖，如果keyword频繁变化，只有在停止变化后500ms才发送请求
      debounce: 500
    }
  );
</script>

分页

以 todo 列表分页请求为例，你可以这样做。

<template>
  <!-- ... -->
</template>

<script setup>
  // method实例创建函数
  const getTodoList = currentPage => {
    return alovaInstance.Get('/todo/list', {
      params: {
        currentPage,
        pageSize: 10
      }
    });
  };

  const currentPage = ref(1);
  const {
    loading,
    data,
    error

    // 第一个参数为返回method实例的函数，而非method实例本身
  } = useWatcher(
    () => getTodoList(currentPage.value),
    // 被监听的状态数组，这些状态变化将会触发一次请求
    [currentPage],
    {
      // ⚠️调用useWatcher默认不触发，注意和useRequest的区别
      // 手动设置immediate为true可以初始获取第1页数据
      immediate: true
    }
  );
</script>

你还可以手动发送请求

有时候你希望在监听状态未变化时重新发送请求（如服务端数据已更新），你也可以通过send函数手动触发请求，用法和useRequest相同。

const {
  // ...
  // highlight-start
  send
  // highlight-end
} = useWatcher(
  () => getTodoList($currentPage),
  // 被监听的状态数组，这些状态变化将会触发一次请求
  [currentPage],
  {
    immediate: true
  }
);

// highlight-start
send();
// highlight-end

[2.9.0+]在 react 中，send 函数使用了useCallback包裹，同时它也不受闭包陷阱限制，你可以直接在事件中使用它，不用担心引起性能问题。

请求防抖

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

什么是函数防抖

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

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

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

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

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

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

（结尾）为什么要使用alova

alova 也致力于解决客户端网络请求的问题，但与其他请求库不同的是，alova 选择了业务场景化请求策略的方向，它配合axios/fetch api等请求库后能满足你绝大部分请求需求（99%）的同时，还提供了丰富的高级功能。

• 你可能曾经也在思考着应该封装fetch和axios，现在你不再需要这么做了，通过 alova 使用声明的方式完成请求，例如请求共享、分页请求、表单提交、断点上传等各种较复杂的请求，以及自动化缓存管理、请求共享、跨组件更新状态等。
• alova 是轻量级的，只有 4kb+，是 axios 的 30%+。
• 目前支持vue/react/react-native/svelte，以及next/nuxt/sveltekit等 SSR 框架，同时也支持Uniapp/Taro多端统一框架。
• alova 是低耦合的，你可以通过不同的适配器让 alova 在任何 js 环境下，与任何 UI 框架协作使用（内置支持的 UI 框架为vue/react/svelte），并且提供了统一的使用体验和完美的代码迁移。
• 使用 alova 还能实现 api 代码的高聚合组织方式，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势。

与其他请求库的对比

多框架支持

现在，你还可以在 vue options（vue2 和 vue3） 写法中完美使用 alova，点此查看详情。后续我们将陆续支持以下框架：

• 函数式，如solid/preact/qwik。
• class 式，如angular/lit/stencil。
• options 式，如原生小程序(中国🇨🇳)。

alovajs 还提供了其他强大的请求策略：

名称	描述	文档
分页请求策略	自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50%	usePagination
无感数据交互策略	全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用	useSQRequest
表单提交策略	为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能	useForm
文件上传策略	更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换	useUploader
发送验证码	验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。	useCaptcha
自动重新拉取数据	在一定条件下自动重新拉取数据，保证始终展示最新数据。	useAutoRequest
跨组件触发请求	一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数	actionDelegationMiddleware
串行请求的 useRequest	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数	useSerialRequest
串行请求的 useWatcher	比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。	useSerialWatcher
请求重试策略	请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用	useRetriableRequest
SSE 请求	通过 Server-sent Events 进行请求	useSSE

想学习更多 alovajs 的用法，欢迎来alova 官网学习。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。

如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对 alovajs 怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~

欢迎加入交流社区

有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

• 加入在 Discord 社区参与交流
• 加入 QQ 频道社区参与交流

同时也欢迎贡献你的一份力量，请移步贡献指南。

往期文章

• 用声明式实现复杂请求，让代码优雅度直线上升
• 改变 axios 的用法后，我的工作效率提升了 3 倍
• 如何让 axios 提升分页管理效率
• 整会 promise 这 8 个高级用法，再被问倒来喷我