終極方案：Vue3 中把 Axios 用到極致！
從 2014 年 Vue 誕生到今天，Axios 幾乎成了前端工程里的“釘子戶”——穩定、簡單、易上手，但十年過去，它依舊是 “裸 HTTP 客戶端”。
想要分頁、緩存、并行/依賴請求、自動重試、請求取消、樂觀更新？對不起，全部自己手搓。
現在，隨著 Hooks 思想 在前端的普及，Vue3 終于有了屬于自己的 “一站式數據層”——TanStack Query Vue。
這一次，真的可以讓Axios 再次強大??！
什么是 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 的優勢
能力 | TanStack Query Vue | 純 Axios |
數據緩存 | ? 內置 LRU，自動垃圾回收 | ? 自己寫 Map |
分頁/無限加載 | ? | ? 自行維護頁碼、累加數組 |
請求取消 | ? | ? 手動 AbortController |
依賴查詢 | ? | ? 自己寫 |
并行/串行 | ? 同時發或按依賴發 | ? Promise.all / then 鏈 |
樂觀更新 | ? | ? 自己寫快照 & 回滾 |
調試 | ? 官方 Devtools | ? |
這里沒有貶低 Axios 的意思，目前為止我依然覺得 Axios 是最偉大的的請求庫！
與純 Axios 使用對比
場景 | Axios 代碼量 | TanStack Query Vue |
列表 + 下拉加載 | 50+ 行 | 10 行 |
詳情頁切換 ID 重新拉取 | 寫 watch | queryKey 自動觸發 |
提交表單后刷新列表 | 手動再次 get() | onSuccess 里一句 invalidateQueries |
斷網重連自動重試 | 自己寫定時器 | retry:3 一行配置 |
Vue3 快速上手（3 分鐘跑通）
安裝：
npm i @tanstack/vue-query注冊插件：
// main.ts
import { VueQueryPlugin } from '@tanstack/vue-query'
createApp(App).use(VueQueryPlugin).mount('#app')組件內直接請求：
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { data, isLoading, isError } = useQuery({
queryKey: ['posts'],
queryFn: () => axios.post('/api/posts').then(r => r.json())
})
</script>
<template>
<div v-if="isLoading">加載中...</div>
<div v-else-if="isError">請求失敗</div>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>
</template>四個高頻實戰案例
(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 = useQueryClient()
const { 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
調試神器：@tanstack/vue-query-devtools
一行代碼開啟瀏覽器調試面板：
import { VueQueryDevTools } from '@tanstack/vue-query-devtools'
app.use(VueQueryDevTools)
效果：
- 實時查看緩存 key、數據、失效時間;
- 一鍵手動觸發 refetch / invalidate;
- 支持黑暗 / 亮色主題，比 console.log 爽 10 倍！
寫在最后
Axios 依舊是偉大的 HTTP 客戶端，但在 “數據層” 需求日益復雜的今天，TanStack Query Vue 把「取數據、管數據、刷新數據」做成了 配置驅動。
從簡單列表到企業級中臺，10 行代碼 就能搞定過去 100 行 的邏輯。
新項目，不妨試試 Vue3 + TanStack Query，讓業務代碼真正回歸業務，而不是迷失在無盡的 loading、error、retry 之中。
TanStack Query Vue 中文：https://tanstack.com.cn/query/latest/docs/framework/vue/overview
