1. Axios管理器(axiosManager)
Axios管理器用于配置初始化Axios实例,支持:
- 配置全局默认的Axios实例
- 配置多个不同的Axios实例列表
- 对于每一个Axios实例都可以分别配置:
- 设置Axios实例的baseURL
- 添加请求进度条
- 添加请求防抖
- 添加异常处理器
1.1. 配置说明
axios:
baseUrl: "/" # 默认Axios实例的基础地址
progressEnabled: true # 是否开启默认Axios实例的请求进度条
# 默认Axios实例的请求防抖配置
debounce:
enabled: true # 是否开启防抖(可选,默认为:true/开启)
wait: 1000 # 请求延迟等待时间(可选,单位:毫秒,默认为:1000)
# 微服务路由配置
route:
enabled: false # 是否开启微服务路由(可选,默认为:false/不开启)
services: # 微服务名和服务路径的路由表
# 其它Axios实例列表配置
instances:
注意:所有Axios实例均会添加异常处理器,具体参见:异常处理/Axios异常处理器
1.1.1. 请求进度条
Axios发出请求时会出现如下进度条。
请求结束后进度条会消失。
1.1.2. 请求防抖
Axios管理器采用的是 “ultra-debounce” 提供的隐式防抖,具体参见:ultra-debounce隐式防抖
1.1.3. 请求服务路由
在微服务架构下,前端Axios的baseUrl一般配置网关的地址。在Axios访问具体的后端微服务时,除了服务路径本身的路径之外,还需要加上服务路径前缀,以便于网关根据前缀路由到具体的服务。 而在非微服务架构下,又不需要加上服务路径前缀。 因此平台约定在使用Axios访问后端服务时,需要加上服务名配置参数 "service" 。在开启微服务路由的时,平台会根据配置的服务名找到并添加上对应的服务路径前缀。
axios:
route:
enabled: false # 是否开启微服务路由(可选,默认为:false/不开启)
services: # 微服务名和服务路径的路由表
- name: fooService
url: "/foo"
const response = await axios.get("/xxx", {service: "fooService"})
最终发出的请求地址为:“/foo/xxx”。
1.1.4. 配置多个Axios实例
“instances” 可以配置多个不同的Axios实例,用于访问第三方API。
axios:
instances:
- name:
baseUrl:
progressEnabled:
debounce:
注意:所有其它的Axios实例继承默认Axios实例的默认配置,也可以覆盖默认配置。