vue-axios-optimize 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -20
- package/index.js +1 -1
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -43,6 +43,7 @@ import { useUserStoreHook } from '@/store/modules/user'
|
|
|
43
43
|
import { ElMessageBox } from 'element-plus'
|
|
44
44
|
|
|
45
45
|
const AxiosOptimize = new axiosOptimize(axios, instance, {
|
|
46
|
+
responseTypesStr: "arraybuffer,blob",
|
|
46
47
|
showLoadingFun: () => {
|
|
47
48
|
// 展示加载动画方法
|
|
48
49
|
useAppStore.setLoadingStatus(true)
|
|
@@ -112,7 +113,6 @@ const AxiosOptimize = new axiosOptimize(axios, instance, {
|
|
|
112
113
|
})
|
|
113
114
|
|
|
114
115
|
export default AxiosOptimize.instance
|
|
115
|
-
|
|
116
116
|
```
|
|
117
117
|
|
|
118
118
|
axios.js的内容需要做些细微的更改 大致内容如下
|
|
@@ -149,6 +149,10 @@ service.interceptors.request.use(
|
|
|
149
149
|
// respone拦截器
|
|
150
150
|
service.interceptors.response.use(
|
|
151
151
|
async (res) => {
|
|
152
|
+
// 二进制数据则直接返回
|
|
153
|
+
if (res.request.responseType === "blob" || res.request.responseType === "arraybuffer"){
|
|
154
|
+
return res
|
|
155
|
+
}
|
|
152
156
|
const { config, data } = res
|
|
153
157
|
|
|
154
158
|
// code为200 直接返回有用数据 多返回一个config ...data 为接口返回的最外层数据
|
|
@@ -175,7 +179,6 @@ service.interceptors.response.use(
|
|
|
175
179
|
)
|
|
176
180
|
|
|
177
181
|
export default service
|
|
178
|
-
|
|
179
182
|
```
|
|
180
183
|
|
|
181
184
|
接口处使用，如commo-api.js 大致如下
|
|
@@ -300,28 +303,29 @@ export function patchDemo2(data = {}, config = {}) {
|
|
|
300
303
|
|
|
301
304
|
## new axiosOptimize(axios, instance, options）参数说明
|
|
302
305
|
|
|
303
|
-
| 参数
|
|
304
|
-
| -------- |
|
|
305
|
-
| axios | 安装axios中的axios
|
|
306
|
+
| 参数 | 说明 | 来源 |
|
|
307
|
+
| -------- | ------------------------- | ------------------------------------- |
|
|
308
|
+
| axios | 安装axios中的axios | import axios from 'axios' |
|
|
306
309
|
| instance | 创建好的axios实例，已经配置好请求头等相关内容 | import instance from '@/api/axios.js' |
|
|
307
|
-
| options | 一些配置，详情继续阅读文档
|
|
310
|
+
| options | 一些配置，详情继续阅读文档 | 自定义配置 |
|
|
308
311
|
|
|
309
312
|
## options配置
|
|
310
313
|
|
|
311
|
-
| 参数
|
|
312
|
-
| -------------------------------------- | -------- |
|
|
313
|
-
| showLoadingFun(config, requestingNum) | Function | 展示动画,config为该请求的config，requestingNum为目前正在请求几个接口，此处可执行一些展示全局动画的操作 | 否
|
|
314
|
-
| hideLoadingFun(config, requestingNum) | Function | 隐藏动画,config为该请求的config，requestingNum为目前正在请求几个接口，此时应该为0，此处可执行关闭全局动画的操作 | 否
|
|
315
|
-
| openRefresh | Boolean | 是否开启无感知刷新token
|
|
316
|
-
| refreshApiUrl | String | 请求刷新token接口的api地址 如/xiaobu-admin/refresh-token
|
|
317
|
-
| getRefreshTokenFun() | Function | 获取当前项目的 refreshToken方法， 记得 return 回去
|
|
318
|
-
| reloginFun(response) | Function | response 为axios实例中返回的数据，此处建议执行清除token相关缓存并弹框提示，点击确认进行刷新页面操作 | 当openRefresh为true时必传 | 无
|
|
319
|
-
| refreshTokenStore(refreshToken) | Function | refreshToken为当前浏览器缓存的refreshToken，需要返回一个Promise，利用此refreshToken调用接口获取新的accessToken 并设置。 | 当openRefresh为true时必传 | 无
|
|
320
|
-
| setAccessTokenFun(config, accessToken) | Function | config为该请求的config，accessToken 为新获取的accessToken, 此处需要将accessToken设置到请求头中 | 当openRefresh为true时必传 | 无
|
|
321
|
-
| responseResultFun(res) | Function | res为axios实例返回的res，格式化接口请求成功后返回的数据
|
|
322
|
-
| formatAccessTokenFun(data) | Function | data为responseResultFun报错时返回的res
|
|
323
|
-
| accessTokenExpirationCode | number | 配置accessToken过期返回的业务状态码
|
|
324
|
-
| refreshTokenExpirationCode | number | 配置refreshToken过期返回的业务状态码
|
|
314
|
+
| 参数 | 类型 | 说明 | 是否必传 | 默认值 |
|
|
315
|
+
| -------------------------------------- | -------- | ---------------------------------------- | -------------------- | ------------------------------ |
|
|
316
|
+
| showLoadingFun(config, requestingNum) | Function | 展示动画,config为该请求的config，requestingNum为目前正在请求几个接口，此处可执行一些展示全局动画的操作 | 否 | 无 |
|
|
317
|
+
| hideLoadingFun(config, requestingNum) | Function | 隐藏动画,config为该请求的config，requestingNum为目前正在请求几个接口，此时应该为0，此处可执行关闭全局动画的操作 | 否 | 无 |
|
|
318
|
+
| openRefresh | Boolean | 是否开启无感知刷新token | 否 | false |
|
|
319
|
+
| refreshApiUrl | String | 请求刷新token接口的api地址 如/xiaobu-admin/refresh-token | 当openRefresh为true时必传 | 无 |
|
|
320
|
+
| getRefreshTokenFun() | Function | 获取当前项目的 refreshToken方法， 记得 return 回去 | 当openRefresh为true时必传 | 无 |
|
|
321
|
+
| reloginFun(response) | Function | response 为axios实例中返回的数据，此处建议执行清除token相关缓存并弹框提示，点击确认进行刷新页面操作 | 当openRefresh为true时必传 | 无 |
|
|
322
|
+
| refreshTokenStore(refreshToken) | Function | refreshToken为当前浏览器缓存的refreshToken，需要返回一个Promise，利用此refreshToken调用接口获取新的accessToken 并设置。 | 当openRefresh为true时必传 | 无 |
|
|
323
|
+
| setAccessTokenFun(config, accessToken) | Function | config为该请求的config，accessToken 为新获取的accessToken, 此处需要将accessToken设置到请求头中 | 当openRefresh为true时必传 | 无 |
|
|
324
|
+
| responseResultFun(res) | Function | res为axios实例返回的res，格式化接口请求成功后返回的数据 | 非必传 | axios实例返回的res |
|
|
325
|
+
| formatAccessTokenFun(data) | Function | data为responseResultFun报错时返回的res | 非必传 | axios实例返回的res.data.accessToken |
|
|
326
|
+
| accessTokenExpirationCode | number | 配置accessToken过期返回的业务状态码 | 非必传 | 401 |
|
|
327
|
+
| refreshTokenExpirationCode | number | 配置refreshToken过期返回的业务状态码 | 非必传 | 403 |
|
|
328
|
+
| responseTypesStr（v1.0.2） | String | 配置数据返回类型，实现当此类型时返回原封不动的响应数据的data数据 | 非必传 | 无 |
|
|
325
329
|
|
|
326
330
|
## store/user.ts代码大致如下
|
|
327
331
|
|
|
@@ -468,6 +472,14 @@ module.exports = {
|
|
|
468
472
|
|
|
469
473
|
## 更新日志
|
|
470
474
|
|
|
475
|
+
### 1.0.3
|
|
476
|
+
|
|
477
|
+
1. 【优化】修复部分检查代码比较严格的时候 会报 noShowLoading 未定义的错误的问题
|
|
478
|
+
|
|
479
|
+
### 1.0.2
|
|
480
|
+
|
|
481
|
+
1. options新增responseTypesStr配置项，字符串类型，多个时使用英文逗号隔开,此返回类型的数据直接返回原有数据的data数据。在axios.js原封装函数中返回原始的响应返回数据。解决文件类型数据时不可用的问题
|
|
482
|
+
|
|
471
483
|
### 1.0.1
|
|
472
484
|
|
|
473
485
|
1. 修复单词错误问题 isPervent 修改为 isPrevent
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class e{instance;requestObj={};requestingNum=0;authErrorArr=[];queue=[];isRefresh=!1;isShowReLoginDialog=!1;constructor(e,s,r){this.instance=s,this.instance.interceptors.request.use((s=>{s
|
|
1
|
+
class e{instance;requestObj={};requestingNum=0;authErrorArr=[];queue=[];isRefresh=!1;isShowReLoginDialog=!1;constructor(e,s,r){this.instance=s,this.instance.interceptors.request.use((s=>{s?.noShowLoading||(this.requestingNum++,r.showLoadingFun&&r.showLoadingFun(s,this.requestingNum));const t=s.url;if(r.openRefresh){-1===this.authErrorArr.indexOf(t)&&this.isRefresh&&t!==r.refreshApiUrl&&this.authErrorArr.push(t)}if(t&&s.preventDuplicateRequestsType)if("cancel"===s.preventDuplicateRequestsType){this.requestObj[t]&&this.requestObj[t].cancel({config:s,isCancel:!0});const r=e.CancelToken;this.requestObj[t]=r.source(),s.cancelToken=this.requestObj[t].token}else if("prevent"===s.preventDuplicateRequestsType){if("requesting"===this.requestObj[t])return Promise.reject({config:s,isPrevent:!0});this.requestObj[t]="requesting"}return s}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:s,responseErr:t}=e;if(s?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},r.hideLoadingFun&&r.hideLoadingFun(s,this.requestingNum))),s&&this.requestObj[s.url]&&delete this.requestObj[s.url],t){if(r.openRefresh){const t=this.authErrorArr.indexOf(s.url);if(-1!==t)return this.authErrorArr.splice(t,1),new Promise((e=>{this.queue.push((t=>{r.setAccessTokenFun(s,t),e(this.instance.request(s))}))}));const i=r.accessTokenExpirationCode||401;if(Number(e.code)===i){const t=r.getRefreshTokenFun();if(!t){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,r.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}if(this.isRefresh)return new Promise((e=>{this.queue.push((t=>{r.setAccessTokenFun(s,t),e(this.instance.request(s))}))}));this.isRefresh=!0;try{const e=await r.refreshTokenStore(t);let i=null;return i=r.formatAccessTokenFun?r.formatAccessTokenFun(e):e.data.accessToken,this.queue.forEach((e=>e(i))),this.instance.request(s)}catch{if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,r.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}finally{this.queue=[],this.isRefresh=!1}}const n=r.refreshTokenExpirationCode||403;if(Number(e.code)===n){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,r.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}}return Promise.reject(new Error(e.message||"Error"))}if(r.responseTypesStr?.toLocaleLowerCase().split(",").includes(s.responseType?.toLocaleLowerCase()))return e.data;const i=JSON.parse(JSON.stringify(e));return delete i.responseErr,r.responseResultFun?r.responseResultFun(i):i}),(e=>{const s=e.config||e?.message?.config||{};return s?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},r.hideLoadingFun&&r.hideLoadingFun(s,this.requestingNum))),e.isPrevent||e?.message?.isCancel||delete this.requestObj[s.url],Promise.reject(e)}))}}export default e;
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "vue-axios-optimize",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "vue项目对axios请求的优化，实现可配置展示全局加载动画，可配置是否重复请求时取消前面的请求或者阻止后面的请求。",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
"keywords": [
|
|
10
|
-
"vue",
|
|
11
|
-
"axios",
|
|
12
|
-
"vue3",
|
|
13
|
-
"vue2"
|
|
14
|
-
],
|
|
15
|
-
"author": "沈延祥",
|
|
16
|
-
"license": "ISC"
|
|
17
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-axios-optimize",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "vue项目对axios请求的优化，实现可配置展示全局加载动画，可配置是否重复请求时取消前面的请求或者阻止后面的请求。",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"vue",
|
|
11
|
+
"axios",
|
|
12
|
+
"vue3",
|
|
13
|
+
"vue2"
|
|
14
|
+
],
|
|
15
|
+
"author": "沈延祥",
|
|
16
|
+
"license": "ISC"
|
|
17
|
+
}
|