Vue3 官方宣布淘汰 Axios，拥抱新趋势：Alova.js
在过去的十年中，Axios 凭借其简洁的 API 设计和浏览器/Node.js 双环境支持，成为前端开发者的首选请求库。然而，随着现代前端框架的演进和工程化需求的升级，Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场。
Axios 的四大时代痛点
1. 冗余的适配逻辑
Axios 的通用配置虽然支持多环境，但在实际使用中，可能只需要浏览器端的适配器：
axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })
2. 弱 TypeScript 支持
在使用 Axios 时，需要手动定义响应类型，并手动解构 data：
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：
const {
data,
loading,
error,
send: fetchUser
} = useRequest(() => userAPI.get({ id: 1 }))
4. 多场景解决方案内置
- SSR 友好：服务端渲染直出数据。
- 文件分片上传：内置进度监听和暂停恢复。
- 数据缓存：支持内存/SessionStorage 多级缓存策略 。([alova.js.org][1])
实战迁移指南
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 alovaInstance = createAlova({
beforeRequest: (method) => {
method.config.headers.token = localStorage.getItem('token')
},
responded: (response) => response.json() // 自动解析 JSON
})
迁移成本高？Alova 给你保底方案
Alova 提供兼容模式，可以在 Alova 中使用 Axios 适配器：
import { axiosAdapter } from '@alova/adapter-axios'
const alovaInstance = createAlova({
requestAdapter: axiosAdapter(axios)
})
Alova.js 作为新一代请求库，凭借其轻量、智能和现代化的设计，正在逐步取代 Axios，成为 Vue3 等现代前端框架的首选。通过上述的迁移指南，开发者可以平滑过渡，享受更高效的开发体验。