Vue3 官方宣布淘汰 Axios,拥抱新趋势
https://www.toutiao.com/article/7501946730502718003/?app=news_article&timestamp=1746701838&use_new_style=1&req_id=202505081857170FA8900791305E318288&group_id=7501946730502718003&req_id_new=202505081857170FA8900791305E318288&chn_id=-3&category_new=__all__&share_did=MS4wLjACAAAAcWOb7G63dFVuw5ZmXCVNa3Ibg79FobwWQRGjdOqkrlaONNEEIvkD1Fb2Gq1tPOOg&share_uid=MS4wLjABAAAAoY8NaPCldFN1NRSpqLW9zsddTVN-lrj9S2XkGVpdF_o&share_token=53CF7B58-0BD8-4074-9633-271FE117BF9E&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1&source=m_redirect

过去十年,Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持,成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级,Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场

Axios的四大时代痛点

  1. 冗余的适配逻辑
// Axios的通用配置(但实际你可能只用浏览器端)
axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })
  1. 弱TypeScript支持
// Axios需要手动定义响应类型
interface Response<T> { data: T }
axios.get<Response<User>>('/api/user') // 仍需手动解构data
  1. 过度封装的反模式
// 层层拦截器叠加导致调试困难
axios.interceptors.request.use(config => {
  // 权限校验拦截器
})
axios.interceptors.response.use(response => {
  // 全局错误处理拦截器
})
  1. 生态割裂

需要额外引入第三方库实现缓存、队列等高级功能,增加维护成本

Alova.js 的核心优势

  1. 极致的轻量与性能

Tree-shaking优化:仅打包使用到的功能模块
零依赖:基础包仅 4KB(Axios 12KB)

  1. 智能请求管理(开箱即用)
// 一个配置实现请求竞态取消+重复请求合并+错误重试
const { data } = useRequest(userInfoAPI, {
  abortOnUnmount: true,    // 组件卸载自动取消请求
  dedupe: true,            // 自动合并重复请求
  retry: 3                 // 自动重试3次
})
  1. 声明式编程范式
与 React/Vue 深度集成,提供Hooks风格API:

// Vue3示例:自动管理loading/error状态
const { 
  data, 
  loading, 
  error, 
  send: fetchUser 
} = useRequest(() => userAPI.get({ id: 1 }))
  1. 多场景解决方案内置

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))
  1. 复杂拦截器迁移
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)
})
文档更新时间: 2025-05-09 08:37   作者:admin