⚠️

先说两句

I 用了两年的 TanStack Query，一度觉得它就是前端请求库的终局形态。稳定、社区大、文档好——看起来没什么毛病。

直到我开始做一个中后台，表单、分页、上传、轮询、跨组件通信…，全来了。我才意识到一件事：

TanStack Query 给你的只是一个「提高版 fetcher」，它把所有复杂度都留给了你。

而 alova 给了你一套完整的请求策略。

不是某个特性碾压，而是alova 的体验断层式领先。怎么说呢，下面我用个真实场景来证明。

场景的观点是。表单提交

Before — TanStack Query + React Hook Form

// TanStack Query 没有原生表单钩子
// 你需要手动管理提交、重置、草稿、验证
const { mutateAsync } = useMutation({
mutationFn: => axios.post,});const { register,handleSubmit。reset } = useForm({
// 手动管理草稿持久化
defaultValues: loadFromDraft,});// 监听表单变化存草稿
useEffect => {
saveDraft);},)，不过，

Pain Point: 必须手动写提交逻辑、草稿保存与恢复。还有配合外部表单库，代码量大且易出错。

After — alova

const {
loading,submit。updateForm,reset,form,} = useForm(
=> alova.Post,{
store这方面，true,resetAfterSubmiting: true,}
);// 完了，就这么简单。

BENEFIT: 内置草稿持久化、多步骤状态共享与提交后自动重置，无需额外 useEffect 或外部库。

BENEFIT: 如果你做的是数十甚至数百个表单，useForm 能让你省掉至少几百行草稿管理代码。

从场景来看，分页 / 无限滚动

Before — TanStack Query

// 手动管理页码。手动拼接 keepPreviousData
const = useState;const { data,isPreviousData } = useQuery({
queryKey:。queryFn: => fetch,keepPreviousData: true,});

Pain Point: 要自己处理页码状态、新增预加载逻辑，还有编辑/删除后列表同步；每一步都要写额外代码，

After — alova

const {
data,loading,page,pageSize,} = usePagination(
=> alova.Get('/api/list'。{
params这方面，{ page,pageSize }
}),{
preloadNextPage:true,total: res=>res.total,pageSize :20
}
);// 编辑后自动更新列表项
const { send : editItem } = useRequest(
=>alova.Put。{
behavior:'silent',onSuccess :=>{ /* 自动替换对应项 */ }
}
);// 删除后自动从列表中移除
const { send : deleteItem } = useRequest(
=>alova.Delete。
{
behavior:'silent',onSuccess :=>{ /* 自动移除 */ }
}
);

BENEFIT: 开箱即用：分页控制、下一页预加载还有列表增删改都无需手写回调或查询失效逻辑。

至于场景，自动轮询 + 焦点刷新

Before — TanStack Query

const {data}=useQuery({
queryKey:。queryFn:=>fetch,refetchInterval:true*1000,// 每秒轮询一次
refetchOnWindowFocus:true,// 焦点刷新
});话说回来，

Pain Point: 开启/关闭轮询仅能通过切换全局标志；若需更细粒度必须自行实现控制逻辑。

After — alova

const {loading,data,stop,resume}=useAutoRequest(
=>alova.Get。{
enablePoll:true,pollInterval:false*1000,// 默认关闭，可随时开启
enableThrottle:true,// 浏览器不可见时暂停请求
enableVisibility:true// 焦点回归时自动刷新
});// 按需调用 stop / resume

BENEFIT: 把轮询节流和可见性控制集中在一个钩子里让开发者只关注「什么时候停」而非「是否开启」。

从场景来看，跨组件请求通信

Before — TanStack Query

// A组件新增数据后手动无效化缓存
const mutation=useMutation({
mutationFn:=>axios.post。onSuccess{
queryClient.invalidateQueries;},})，// B组件依赖同一key；但若要同步某条记录更新则更麻烦...
// 因为组件增多 invalidateCalls 散落难以追踪。

Pain Point: 跨组件间的数据同步必须手动操作缓存失效，导致代码分散且维护成本高。

After — alova

// 定义API并标记名称用于失效触发
const getTodoList==>alova.Get('/api/todo/list'。{
再看name，'todoList',params:{keyword}
});const updateTodo==>alova.Put(`/api/todo/${id}`,data。{
hitSource:'todoList' // 更新会自动失效 todoList 缓存
});其实，// 或者使用 actionDelegationMiddleware 实现跨组件调用
// A组件
const {send}=useRequest(updateTodo。{
middleware:actionDelegationMiddleware
});// B组件
accessAction 

BENEFIT:声明式 hitSource 与函数式 middleware 将跨组件通信变得一目了然无需追踪 queryClient 或 key 图谱。

场景这方面，文件上传

<="" id="”before—tanstack-query”>" p="" query="" tanstack="" –="">

 <="" api="" async=">{" axios.post('="" const="" const{data}="await" data;="" e.total));说起来，="" formdata="new" formdata.append;="" formdata;="" mutationfn="" onuploadprogress:e=">{" p="" return="" setprogress="" upload'。formdata,{="" uploadmutation="useMutation({" });老实说，="" }，="" 自己封装上传逻辑="">
>