首先,需要安装该axios的服务
npm i d4axios -S
// 或者
yarn add d4axios -S
复制代码
当前文章所使用的版本为 0.1.7 版本
createService
创建服务时,需要和其他比如vuex、vue-router一样,需要初始化。而这里的初始化使用的是,createService
。
import { createService } from 'd4axios'
复制代码
createSerivce
也是serviceConfig
的别称。serviceConfig返回的值为axios的proxy对象,而createService返回的值为 vue3 的{ install }
,而d4axios
本身并不依赖于vue的任何版本,因此vue2和react与ng可以正常使用createService
初始化服务
1.1 createSerivce可选配置项 ServiceConfigurationOptions
1. axios ?: AxiosInstance | AxiosRequestConfig
支持传入axios
实例AxiosInstance
或者axios的配置属性AxiosRequestConfig
,不过通常不建议自己创建实例,建议使用配置属性的形式配置。而代码中将会使用
if (isAxiosInstance(configs.axios)) {
globalAxios = configs.axios;
} else {
globalAxios = axios.create(configs.axios)
}
复制代码
而所有的对象将会依赖于这个axios实例,因此可以依托给d4axios
自行创建实例对象。
2. interceptors?: { request,response }
如果有需要,可以使用interceptors配置axios.interceptors.request
和axios.interceptors.response
,目前仅支持配置一个,不建议配置多个。对于一般开发人员来说,不建议配置该项,可以使用下面的配置覆盖。
3. beforeRequest?、beforeResponse?
脱离于axios本身的拦截器,在
axios.request
之前和axios.response
第一次响应被调用。适用于对请求前的值和响应后但还未使用时的data二次处理
beforeRequest
的入参为本次请求时将要发送的参数,函数的返回值为最终请求所需值,因此不建议返回undefined值,且如果入参的对象为formdata,将会被转为object,修改后的值依旧会转换成formdata,因此不需要担心formdata的转换问题。
beforeResponse
的入参为 beforeResponse(response.data
,response
) ,函数最终的返回值作为响应结果值。适合场景为对后台数据结构的重新整理使用。
4. routes ?: { route,onBefore?,onAfter? }[ ]
基于api routes的业务处理单元,很适合控制业务流程时使用,将重复的业务异常处理放到这里,可以抛出所需要的异常信息。
参数为:
-
route:需要拦截的请求url,使用正则匹配
-
onBefore:请求前的拦截处理,第一个参数与beforeRequest一致,第二、三个参数为promise的resolve、reject。决定了该请求是否继续执行。且需要通过resolve返回请求参数的结果值。如果resolve为undefined,表示使用原值
-
onAfter:响应后的拦截处理,第一个参数和第二个参数与beforeResponse一致,第三、四的参数为resolve,reject。可以抛出自定义业务流程异常。
以上内容创建完成后,服务初始化既完成。
如果想使用d4axios
,可以参照换一个方式组织你的Axios代码?中所示例的内容。