Axios替代品Alova
介绍alova | Alova.JS
Multipart 实体请求 | Axios中文文档 | Axios中文网
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)
})Axios的四大时代痛点
1. 冗余的适配逻辑
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 的核心优势
// Axios的通用配置（但实际你可能只用浏览器端）
axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })