Vue3 拋棄 Axios ！用上了 專屬請求庫！
從 2014 年 Vue 誕生到今天，Axios 幾乎成了前端工程里的“釘子戶”——穩(wěn)定、簡單、易上手，但十年過去，它依舊是 “裸 HTTP 客戶端”。
想要分頁、緩存、并行/依賴請求、自動重試、請求取消、樂觀更新？對不起，全部自己手搓。
現(xiàn)在，隨著 Hooks 思想 在前端的普及，Vue3 終于有了屬于自己的 “一站式數(shù)據(jù)層”——TanStack Query Vue。
這一次，真的可以跟 Axios 說再見了！
什么是 TanStack Query Vue
TanStack Query Vue（npm 名 @tanstack/vue-query）是 React Query 的 Vue 兄弟版本，定位 “數(shù)據(jù)層操作系統(tǒng)”，而非簡單的 HTTP 客戶端。
它對任何返回 Promise 的函數(shù)（axios/fetch/GraphQL SDK 等）做二次封裝，提供：
- 自動緩存 / 失效 / 重取
- 分頁、無限滾動、并行/依賴查詢
- 請求取消、樂觀更新、后臺重試
- SSR & Suspense（實驗）
- 官方 Devtools 調(diào)試面板
一句話：只關(guān)心數(shù)據(jù)長什么樣，其余交給框架。
TanStack Query Vue 的優(yōu)勢
能力 | TanStack Query Vue | 純 Axios |
數(shù)據(jù)緩存 | ? 內(nèi)置 LRU，自動垃圾回收 | ? 自己寫 Map |
分頁/無限加載 | ? useInfiniteQuery 一行搞定 | ? 自行維護(hù)頁碼、累加數(shù)組 |
請求取消 | ? cancel() 或 AbortSignal 自動 | ? 手動 AbortController |
依賴查詢 | ? enabled 條件觸發(fā) | ? 自己寫 watch |
并行/串行 | ? 同時發(fā)或按依賴發(fā) | ? Promise.all / then 鏈 |
樂觀更新 | ? onMutate + 回滾 | ? 自己寫快照 & 回滾 |
調(diào)試 | ? 官方 Devtools | ? console.log |
這里沒有貶低 Axios 的意思，目前為止我依然覺得 Axios 是最偉大的的請求庫！
與 Axios 的對比總結(jié)
場景 | Axios 代碼量 | TanStack Query Vue |
列表 + 下拉加載 | 50+ 行 | 10 行 |
詳情頁切換 ID 重新拉取 | 寫 watch | queryKey 自動觸發(fā) |
提交表單后刷新列表 | 手動再次 get() | onSuccess 里一句 invalidateQueries |
斷網(wǎng)重連自動重試 | 自己寫定時器 | retry:3 一行配置 |
Vue3 快速上手（3 分鐘跑通）
安裝：
npm i @tanstack/vue-query注冊插件：
// main.ts
import { VueQueryPlugin } from '@tanstack/vue-query'
createApp(App).use(VueQueryPlugin).mount('#app')組件內(nèi)直接請求：
<script setup>
import { useQuery } from '@tanstack/vue-query'
const { data, isLoading, isError } = useQuery({
queryKey: ['posts'],
queryFn: () => fetch('/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>四個高頻實戰(zhàn)案例
(1) 條件查詢（依賴請求）
const { data } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/user/${userId.value}`).then(r => r.json()),
enabled: !!userId.value // userId 存在才發(fā)請求
})(2) 無限滾動
const {
data,
fetchNextPage,
hasNextPage,
isFetchingNextPage
} = useInfiniteQuery({
queryKey: ['comments'],
queryFn: ({ pageParam = 1 }) =>
fetch(`/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: () => fetch(`/api/item/${id}`).then(r => r.json())
})
)
// queries[i].data 即對應(yīng)結(jié)果(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'])
})當(dāng)然除了以上幾種常用案例，還有更多高級功能比如：輪詢/實時查詢、窗口聚焦時重新獲取、離線支持、滾動恢復(fù)等;
更多的使用方法這里不做過多講解，想要學(xué)習(xí)的同學(xué)可以移步官方文檔：https://tanstack.com.cn/query/latest/docs/framework/vue/overview
調(diào)試神器：@tanstack/vue-query-devtools
一行代碼開啟瀏覽器調(diào)試面板：
import { VueQueryDevTools } from '@tanstack/vue-query-devtools'
app.use(VueQueryDevTools)
效果：
- 實時查看緩存 key、數(shù)據(jù)、失效時間;
- 一鍵手動觸發(fā) refetch / invalidate;
- 支持黑暗 / 亮色主題，比 console.log 爽 10 倍！
寫在最后
Axios 依舊是偉大的 HTTP 客戶端，但在 “數(shù)據(jù)層” 需求日益復(fù)雜的今天，TanStack Query Vue 把「取數(shù)據(jù)、管數(shù)據(jù)、刷新數(shù)據(jù)」做成了 配置驅(qū)動。
從簡單列表到企業(yè)級中臺，10 行代碼 就能搞定過去 100 行 的邏輯。
新項目，不妨試試 Vue3 + TanStack Query，讓業(yè)務(wù)代碼真正回歸業(yè)務(wù)，而不是迷失在無盡的 loading、error、retry 之中。
TanStack Query Vue 中文：https://tanstack.com.cn/query/latest/docs/framework/vue/overview
