在上一篇3.0的文章中，我们了解了一下页面初始化获取数据最常用的方法useRequest，这次4.0的文章中让我们来了解一下useWatcher--状态变化请求,在有一些场景中，有一些数据会变化而需要重新请求，如分页，数据筛选，模糊查询等，就可以使用我们今天所要了解的的useWatcher来监听状态的变化而立即发送乡音的请求。
让我们来看一下官方给出的示例（展示的均是Vue3.2）
1.关键字搜索
<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>
2.分页
<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>
3.手动发送请求
手动发送请求和上一篇中的useRequest发送请求一样，有时候你希望在监听状态未变化时重新发送请求（如服务端数据已更新），你也可以通过send函数手动触发请求。
4.强制发送请求
缓存数据可以提升应用流畅度，以及减小服务器端的压力，但同时存在数据过期的问题弊端，当希望穿透数据缓存获取最新数据时，可以设置force属性达到此效果。
设置静态值
force 默认为 false，设置为 true 时将每次穿透缓存，并发送请求
useWatcher(
() => alovaInstance.Get('/todo'),
[
/* watchingStates */
],
{
force: true
}
);
动态设置 force 值
实际情况中，我们经常需要根据不同情况来设置是否需要强制发送请求，此时可以将 force 设置为一个函数，此函数可通过 send 函数传入。
const { send } = useWatcher(
alovaInstance.Get('/todo'),
[
/* watchingStates */
],
{
force: id => {
return !!id;
}
}
);
send(1);
5.send函数的传递规则
在上面所说的实例中，send函数触发请求，可以接受任意多个参数，这些参数分别被下面四个函数接收
onSuccess、onError、onComplete 回调函数中的event.sendArgs以数组形式接收
const { send, onSuccess, onError, onComplete } = useWatcher(currentPage => getTodoList(currentPage));
onSuccess(event => {
// sendArgs的值为[1]
console.log(event.sendArgs);
});
onError(event => {
// sendArgs的值为[1]
console.log(event.sendArgs);
});
onComplete(event => {
// sendArgs的值为[1]
console.log(event.sendArgs);
});
send(1);
在 force 函数中接收
const { send } = useWatcher(
alovaInstance.Get('/todo'),
[
/* watchingStates */
],
{
force: id => {
return !!id;
}
}
);
send(1);
这篇文章主要学习了一下有关useWatcher有关如何发送状态变化请求，以及send参数传递规则，主要是依照如上提供的官方示例代码进行学习尝试哈！
