闽公网安备 35020302035485号
// 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. 生态割裂// 一个配置实现请求竞态取消+重复请求合并+错误重试
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)
})