Vue3 官方宣布淘汰 Axios,擁抱新趨勢
作者:林三心不學挖掘機
過去十年,Axios 憑借其簡潔的API設計和瀏覽器/Node.js雙環境支持,成為前端開發者的首選請求庫。但隨著現代前端框架的演進和工程化需求的升級,Alova.js 以更輕量、更智能、更符合現代開發范式的姿態登場。
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~
過去十年,Axios 憑借其簡潔的API設計和瀏覽器/Node.js雙環境支持,成為前端開發者的首選請求庫。但隨著現代前端框架的演進和工程化需求的升級,Alova.js 以更輕量、更智能、更符合現代開發范式的姿態登場。
Axios的四大時代痛點
1. 冗余的適配邏輯
// Axios的通用配置(但實際你可能只用瀏覽器端)
axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })
2. 弱TypeScript支持
// Axios需要手動定義響應類型
interface Response<T> { data: T }
axios.get<Response<User>>('/api/user') // 仍需手動解構data
3. 過度封裝的反模式
// 層層攔截器疊加導致調試困難
axios.interceptors.request.use(config => {
// 權限校驗攔截器
})
axios.interceptors.response.use(response => {
// 全局錯誤處理攔截器
})
4. 生態割裂
需要額外引入第三方庫實現緩存、隊列等高級功能,增加維護成本
Alova.js 的核心優勢
1. 極致的輕量與性能
- Tree-shaking優化:僅打包使用到的功能模塊
- 零依賴:基礎包僅 4KB(Axios 12KB)
2. 智能請求管理(開箱即用)
// 一個配置實現請求競態取消+重復請求合并+錯誤重試
const { data } = useRequest(userInfoAPI, {
abortOnUnmount: true, // 組件卸載自動取消請求
dedupe: true, // 自動合并重復請求
retry: 3 // 自動重試3次
})
3. 聲明式編程范式
與 React/Vue 深度集成,提供Hooks風格API:
// Vue3示例:自動管理loading/error狀態
const {
data,
loading,
error,
send: fetchUser
} = useRequest(() => userAPI.get({ id: 1 }))
4. 多場景解決方案內置
- SSR友好:服務端渲染直出數據
- 文件分片上傳:內置進度監聽和暫停恢復
- 數據緩存:支持內存/SessionStorage多級緩存策略
實戰遷移指南
1. 基礎請求改造
Axios:
axios.get('/api/user', { params: { id: 1 } })
.then(res => console.log(res.data))
Alova:
// 定義API模塊(享受類型提示)
const userAPI = {
get: (id) => alova.Get('/api/user', { params: { id } })
}
// 發起請求(自動推導user類型?。?const { data: user } = useRequest(userAPI.get(1))
2. 復雜攔截器遷移
Axios的混亂攔截:
// 請求攔截
axios.interceptors.request.use(config => {
config.headers.token = localStorage.getItem('token')
return config
})
// 響應攔截
axios.interceptors.response.use(
response => response.data,
error => Promise.reject(error.response)
)
Alova的優雅中間件:
// 全局統一邏輯(類型安全!)
const alova = createAlova({
beforeRequest: (method) => {
method.config.headers.token = localStorage.getItem('token')
},
responded: (response) => response.json() // 自動解析JSON
})
遷移成本高?Alova給你保底方案
// 兼容模式:在Alova中使用Axios適配器
import { axiosAdapter } from '@alova/adapter-axios'
const alova = createAlova({
requestAdapter: axiosAdapter(axios)
})
責任編輯:武曉燕
來源:
前端之神