自2014年Vue问世以来，Axios几乎成为了前端开发领域的“常青树”——它以稳定、简洁和易于上手著称。然而，十年过去，它依然仅是一个“裸 HTTP 客户端”。
想要实现诸如分页、缓存、并行和依赖请求、自动重试、请求取消、乐观更新这些功能？遗憾的是，这些需求往往需要开发者自行实现。
随着Hooks思想在前端的广泛应用，Vue3终于迎来了自己的“一站式数据层”解决方案——TanStack Query Vue。这一次，Axios将能借此机会焕发新生。
TanStack Query Vue（npm包名为@tanstack/vue-query）是React Query的Vue版本，其目标是成为一个真正的“数据层操作系统”，远超过简单的HTTP客户端。它能够对任何返回Promise的函数（如Axios、fetch、GraphQL SDK等）进行二次封装，提供简洁的API：
一句话概括：开发者只需关注数据的展示形式，其余操作均交由框架处理。
功能对比：
功能 | TanStack Query Vue | 纯Axios |
-----------------------|---------------------------------------|----------------------------------|
数据缓存 | 内置LRU，具备自动垃圾回收功能 | 需自行编写Map |
分页/无限加载 | useInfiniteQuery一行代码搞定 | 需手动维护页码和数组 |
请求取消 | 支持cancel()或自动使用AbortSignal | 需手动管理AbortController |
依赖查询 | enabled条件触发 | 需手动编写watch |
并行/串行请求 | 可以并行或按依赖顺序发送请求 | 使用Promise.all或then链 |
乐观更新 | onMutate支持回滚 | 需自行编写快照和回滚逻辑 |
调试工具 | 提供官方Devtools | 需使用console.log打印调试信息 |
这并不是说我对Axios有所贬低。在我看来，Axios依然是迄今为止最优秀的请求库之一。
实际场景
以Axios为例，以下是代码量对比：
- 列表和下拉加载：
- Axios：约50行代码
- TanStack Query Vue：仅需10行代码
- 详情页切换ID并重新拉取：
- Axios：需要手动编写watch
- TanStack Query Vue：通过queryKey自动触发
- 表单提交后刷新列表：
- Axios：需手动再get一次
- TanStack Query Vue：用onSuccess只需调用invalidateQueries
- 断网重连自动重试：
- Axios：需要编写定时器
- TanStack Query Vue：通过简单配置即可实现retry:3
坦白而言，TanStack Query Vue能轻松实现以下多项功能：
1. 条件查询（依赖请求）
2. 无限滚动
3. 并行多个请求
4. 表单提交及乐观更新
当然，这些仅仅是一些常见的场景。TanStack Query Vue还具备更多高级功能，如轮询、实时查询、窗口聚焦时的自动获取、离线支持和滚动恢复等。
此外，开启浏览器调试面板只需一行代码，使用起来便利无比。这与Axios作为杰出的HTTP客户端并不冲突；然而，在如今数据层需求日益复杂的背景下，TanStack Query Vue通过配置驱动极大地简化了“获取数据、管理数据、刷新数据”的过程。
从简单的列表到企业级的中台，只需10行代码便能实现过去100行逻辑所需的功能。在新项目中，不妨尝试使用Vue3与TanStack Query，使得业务逻辑真正回归到业务本身，而不是陷入无尽的loading、error和retry的烦恼之中。
