终极方案：Vue3 中把 Axios 用到极致！

摘要：TanStack Query Vue（npm 名 @tanstack/vue-query）是 React Query 的 Vue 兄弟版本，定位“数据层操作系统”，而非简单的 HTTP 客户端。

从 2014 年 Vue 诞生到今天，Axios 几乎成了前端工程里的“钉子户”——稳定、简单、易上手，但十年过去，它依旧是 “裸 HTTP 客户端”。

想要分页、缓存、并行/依赖请求、自动重试、请求取消、乐观更新？对不起，全部自己手搓。

现在，随着 Hooks 思想 在前端的普及，Vue3 终于有了属于自己的 “一站式数据层”——TanStack Query Vue。

TanStack Query Vue（npm 名 @tanstack/vue-query）是 React Query 的 Vue 兄弟版本，定位 “数据层操作系统”，而非简单的 HTTP 客户端。

它对任何返回 Promise 的函数（axios/fetch/GraphQL SDK 等）做二次封装，提供：

自动缓存 / 失效 / 重取分页、无限滚动、并行/依赖查询请求取消、乐观更新、后台重试SSR & Suspense（实验）官方 Devtools 调试面板能力TanStack Query Vue纯 Axios数据缓存✅ 内置 LRU，自动垃圾回收❌ 自己写 Map分页/无限加载✅ useInfiniteQuery 一行搞定❌ 自行维护页码、累加数组请求取消✅ cancel 或 AbortSignal 自动❌ 手动 AbortController依赖查询✅ enabled 条件触发❌ 自己写 watch并行/串行✅ 同时发或按依赖发❌ Promise.all / then 链乐观更新✅ onMutate + 回滚❌ 自己写快照 & 回滚调试✅ 官方 Devtools❌ console.log场景Axios 代码量TanStack Query Vue列表 + 下拉加载50+ 行10 行安装npm i @tanstack/vue-query注册插件// main.tsimport { VueQueryPlugin } from '@tanstack/vue-query'createApp(App).use(VueQueryPlugin).mount('#app')组件内直接请求

1. 条件查询（依赖请求）

const { data } = useQuery({ queryKey: ['user', userId], queryFn: => axios.get(`/api/user/${userId.value}`).then(r => r.json), enabled: !!userId.value // userId 存在才发请求})

2. 无限滚动

const { data, fetchNextPage, hasNextPage, isFetchingNextPage} = useInfiniteQuery({ queryKey: ['comments'], queryFn: ({ pageParam = 1 }) => axios.get(`/api/comments?page=${pageParam}`).then(r => r.json), getNextPageParam: (last) => last.nextPage ?? false})

3. 并行多个请求

const ids = [1, 2, 3]const queries = ids.map(id => useQuery({ queryKey: ['item', id], queryFn: => axios.get(`/api/item/${id}`).then(r => r.json) }))// queries[i].data 即对应结果

4. 表单提交 + 乐观更新

const queryClient = useQueryClientconst { mutate } = useMutation({mutationFn: (newTodo) => axios.post('/api/todos', newTodo),onMutate: async (newTodo) => { await queryClient.cancelQueries(['todos']) const prev = queryClient.getQueryData(['todos']) queryClient.setQueryData(['todos'], old => [...old, newTodo]) return { prev } },onError: (err, vars, context) => queryClient.setQueryData(['todos'], context.prev),onSettled: => queryClient.invalidateQueries(['todos'])})

当然除了以上几种常用案例，还有更多高级功能比如：轮询/实时查询、窗口聚焦时重新获取、离线支持、滚动恢复等;

更多的使用方法这里不做过多讲解，想要学习的同学可以移步官方文档：https://tanstack.com.cn/query/latest/docs/framework/vue/overview

一行代码开启浏览器调试面板：

import { VueQueryDevTools } from '@tanstack/vue-query-devtools'app.use(VueQueryDevTools)