@hucy_hucy/axios-wrapper
v0.0.4
Published
create a axios wrapper function for request cache and intercept repeat request
Downloads
2
Readme
用例
import { AxiosWrapper } from '@hucy_hucy/axios-wrapper';
import { ElLoading } from 'element-plus';
const service = new AxiosWrapper({
baseURL: 'http://192.168.1.xyz',
timeout: 15000,
apiMap: []
});
// req.on('repeat')
const whiteList = ['login']
// 是否请求成功的检测函数,有默认值
// 检测请求成功后将会在适当的时候执行缓存操作
service.isRequestSuccess(function (response: AxiosResponse) {
// 默认
// return has(response.data, 'code') && response.data.code === 0
return response.data && response.data.code === 200
})
service.injectHeader(function (apiConfig) {
if (whiteList.includes(apiConfig.name)) return {}
return {
// 在请求前注入 Token
Authorization: 'Bearer ' + getToken(),
'Content-Type': get(config, 'headers.Content-Type', 'application/json')
}
})
// 当 loading 为 true 时会执行
service.startLoading(function (apiConfig) {
return ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
});
service.stopLoading(function (loadingInstance) {
loadingInstance.close()
});
service.request('ApiName', {
params: {},
data: {},
// 默认是 false, 不允许重复请求
allowRepeat: true,
// 默认是false, 不会进行缓存,可选的值有:
// boolean | 'memory' | session | local
// 其中:设置 true 等同于设置
cache: 'memory',
// 是否强制请求,为 true 时会无视缓存
force: false,
// 是否为请求前后添加全局 loading 动画
loading: true // boolean
}).then((response) => {
});
重复请求如何处理 - PLAN
- 使用首次请求的接口,后续的请求全部忽略,后续接口会得到首次请求的返回数据
- 使用最后一次请求的接口,前面的所有请求都取消掉,只有最后一次请求会返回数据