过去十年，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')
3，过度封装的反模式，层层拦截器叠加导致调试困难：
axios.interceptors.request.use(config => {
// 权限校验拦截器
})
axios.interceptors.response.use(response => {
// 全局错误处理拦截器
})
4，生态割裂，需要额外引入第三方库实现缓存、队列等高级功能，增加维护成本。
二、Alova.js 的核心优势
Alova.js是一个流程简化的下一代请求工具，它可以将你的 API 集成工作流从 7 个步骤极致地简化为 1 个步骤，开发者只需要选择 API 即可使用。
有别于@tanstack/react-request、swrjs、ahooks的useRequest等库，alova通过将fetch/XMLHttpRequest/axios封装成请求适配器，并提供不同的复杂请求场景下的请求策略，来达到更简单和统一的开发体验。
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 }))
三、实战迁移指南
使用现有的 axios 实例创建 alova 实例:
import { createAlova } from 'alova';
import { axiosRequestAdapter } from '@alova/adapter-axios';
import axiosInstance from './your-axios-instance'; // 你现有的 axios 实例
const alovaInst = createAlova({
statesHook, // VueHook / ReactHook / SvelteHook
requestAdapter: axiosRequestAdapter({
axios: axiosInstance
})
});
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
})
