Skip to content

aplus axios 系列介绍

技术选型背景

前端应用构建的离不开请求,目前AJAX(Asynchronous JavaScript and XML)请求从诞生已来,主流的底层实现有XMLHttpRequest 和 Fetch API。目前这两种实现的优缺点现状大概是这样,XMLHttpRequest:传统的 AJAX 实现方式,兼容性好,但语法较为繁琐。Fetch API:现代的 AJAX 实现方式,语法简洁,功能强大,但需要现代浏览器支持。老旧浏览器使用Fetch API 会出现问题。世面上主流的请求库,基于XMLHttpRequest实现,有老牌的axios,蚂蚁金服团队的umijs等等。基于Fetch API 的有kyunfetch 等等。基于以上的认知,aplus团队在找一种,稳定支持,近期有更新的开源产品,axios虽然很老了(最初由Matt Zabriskie 创建,并于2014年4月13日发布),但稳定性高,维护日期截止写这篇介绍的时间是2024年的12月 v1.7.9发布。

所以axios在aplus项目中就成为请求库的首选,aplus-axios-core这个包的扩展就是基于axios的,所以axios需要预先在项目中安装,aplus-axios-core本身在构建过程中并不会把axios打入产物当中,除了axios之外,还有qslodash-es这个三个包共同作为aplus-axios-core包的外部依赖。

功能列表

@aplus-frontend/axios-core 核心库

  1. 提供基础的GET/POST/DELETE/PUT请求方法,返回结果支持传入泛型约束请求结果

  2. 提供插件机制支持,可以已aplus-axios-core为基础,按照实际业务场景构建自己的请求预设。比如有的项目是基于vue的,有的是react,那么在实际项目中,我存储token的位置,弹窗UI组件这些都不可能一致。传统的axios的项目二次封装,代码复用性太弱了。每次新项目构建请求库,都要重新封装一遍。就算可以平移,底层的弹窗UI这些,如果需要换框架的代码就没办法继续使用了。

@aplus-frontend/aplus-axios-vue-preset

插件预设,主要封装了错误和成功的弹窗UI,vue3项目适配预设,应用于aplus项目。

  1. 拦截400505的httpCode常见错误并弹窗提示

  2. 弹窗提示支持三种模式modal,notice,message

  3. 错误码多语言,目前支持两种zh_CNen_US

@aplus-frontend/aplus-axios-react-preset

插件预设,主要封装了错误和成功的弹窗UI,react项目适配预设,应用于aplus项目。

  1. 拦截400505的httpCode常见错误并弹窗提示

  2. 弹窗提示支持三种模式modal,notice,message

  3. 错误码多语言,目前支持两种zh_CNen_US

aplus-axios-demo-plugin 满足aplus项目一些演示需求

  1. mock线上数据,上报到固定地址

  2. 回放模式下返回mock数据,而不是真实数据

扩展

以上都不能满足你的需求,要用到自己的项目中,可以查看这篇扩展插件满足自己的业务需求