// Axios的通用配置(但实际你可能只用浏览器端) axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })2. 弱TypeScript支持
// Axios需要手动定义响应类型 interface Response<T> { data: T } axios.get<Response<User>>('/api/user') // 仍需手动解构data3. 过度封装的反模式
// 层层拦截器叠加导致调试困难 axios.interceptors.request.use(config => { // 权限校验拦截器 }) axios.interceptors.response.use(response => { // 全局错误处理拦截器 })4. 生态割裂
// 一个配置实现请求竞态取消+重复请求合并+错误重试 const { data } = useRequest(userInfoAPI, { abortOnUnmount: true, // 组件卸载自动取消请求 dedupe: true, // 自动合并重复请求 retry: 3 // 自动重试3次 })3. 声明式编程范式
// Vue3示例:自动管理loading/error状态 const { data, loading, error, send: fetchUser } = useRequest(() => userAPI.get({ id: 1 }))4. 多场景解决方案内置
数据缓存:支持内存/SessionStorage多级缓存策略
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 } }) } // 堆代码 duidaima.com // 发起请求(自动推导user类型!) const { data: user } = useRequest(userAPI.get(1))2. 复杂拦截器迁移
// 请求拦截 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) })