aplus axios 系列介绍
技术选型背景
前端应用构建的离不开请求,目前AJAX(Asynchronous JavaScript and XML)请求从诞生已来,主流的底层实现有XMLHttpRequest 和 Fetch API。目前这两种实现的优缺点现状大概是这样,XMLHttpRequest:传统的 AJAX 实现方式,兼容性好,但语法较为繁琐。Fetch API:现代的 AJAX 实现方式,语法简洁,功能强大,但需要现代浏览器支持。老旧浏览器使用Fetch API 会出现问题。世面上主流的请求库,基于XMLHttpRequest实现,有老牌的axios,蚂蚁金服团队的umijs等等。基于Fetch API 的有ky, unfetch 等等。基于以上的认知,aplus团队在找一种,稳定支持,近期有更新的开源产品,axios虽然很老了(最初由Matt Zabriskie 创建,并于2014年4月13日发布),但稳定性高,维护日期截止写这篇介绍的时间是2024年的12月 v1.7.9发布。
所以axios在aplus项目中就成为请求库的首选,aplus-axios-core这个包的扩展就是基于axios的,所以axios需要预先在项目中安装,aplus-axios-core本身在构建过程中并不会把axios打入产物当中,除了axios
之外,还有qs
和lodash-es
这个三个包共同作为aplus-axios-core
包的外部依赖。
功能列表
@aplus-frontend/axios-core 核心库
提供基础的
GET
/POST
/DELETE
/PUT
请求方法,返回结果支持传入泛型约束请求结果提供插件机制支持,可以已
aplus-axios-core
为基础,按照实际业务场景构建自己的请求预设。比如有的项目是基于vue的,有的是react,那么在实际项目中,我存储token的位置,弹窗UI组件这些都不可能一致。传统的axios的项目二次封装,代码复用性太弱了。每次新项目构建请求库,都要重新封装一遍。就算可以平移,底层的弹窗UI这些,如果需要换框架的代码就没办法继续使用了。
@aplus-frontend/aplus-axios-vue-preset
插件预设,主要封装了错误和成功的弹窗UI,vue3
项目适配预设,应用于aplus项目。
拦截
400
到505
的httpCode常见错误并弹窗提示弹窗提示支持三种模式
modal
,notice
,message
错误码多语言,目前支持两种
zh_CN
和en_US
@aplus-frontend/aplus-axios-react-preset
插件预设,主要封装了错误和成功的弹窗UI,react
项目适配预设,应用于aplus项目。
拦截
400
到505
的httpCode常见错误并弹窗提示弹窗提示支持三种模式
modal
,notice
,message
错误码多语言,目前支持两种
zh_CN
和en_US
aplus-axios-demo-plugin 满足aplus项目一些演示需求
mock线上数据,上报到固定地址
回放模式下返回mock数据,而不是真实数据
扩展
以上都不能满足你的需求,要用到自己的项目中,可以查看这篇扩展插件满足自己的业务需求