vue-axios-optimize 3.0.0 → 3.1.1
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 +23 -9
- package/index.js +1 -1
- package/package.json +1 -1
- package/utils.js +1 -0
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# vue-axios-optimize使用说明
|
|
2
2
|
|
|
3
3
|
vue-axios-optimize是一个对axios请求优化的vue插件包，引入此包之后，并进行相关配置，即可轻松实现全局请求加载动画，重复请求时取消前面的请求或者阻止后面的请求，并且可实现请求并发数量控制以及接口缓存。
|
|
4
|
-
[可阅读此文章 了解](https://
|
|
4
|
+
[可阅读此文章 了解](https://www.xiaobu.host/vue-axios-optimize)
|
|
5
5
|
|
|
6
6
|
## 安装
|
|
7
7
|
|
|
@@ -56,13 +56,13 @@ module.exports = {
|
|
|
56
56
|
transpileDependencies: [
|
|
57
57
|
"vue-axios-optimize"
|
|
58
58
|
],
|
|
59
|
-
|
|
59
|
+
...
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
63
|
## 总结
|
|
64
64
|
|
|
65
|
-
如有疑问，可关注微信公众号【爆米花小布】进行咨询。
|
|
65
|
+
如有疑问，可关注微信公众号【爆米花小布】进行咨询。
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
@@ -71,11 +71,11 @@ module.exports = {
|
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
微信公众号【爆米花小布】，抖音号【爆米花小布】 更多好玩的插件
|
|
74
|
-
[vue2-element-dict字典包插件使用文档](https://www.
|
|
74
|
+
[vue2-element-dict字典包插件使用文档](https://www.xiaobu.host/vue2-element-dict/)
|
|
75
75
|
|
|
76
76
|
[vue2-element-dict字典包插件](https://www.npmjs.com/package/vue2-element-dict)
|
|
77
77
|
|
|
78
|
-
[vue3-element-dict字典包插件使用文档](https://www.
|
|
78
|
+
[vue3-element-dict字典包插件使用文档](https://www.xiaobu.host/vue3-element-dict/)
|
|
79
79
|
|
|
80
80
|
[vue3-element-dict字典包插件](https://www.npmjs.com/package/vue3-element-dict)
|
|
81
81
|
|
|
@@ -85,12 +85,26 @@ module.exports = {
|
|
|
85
85
|
|
|
86
86
|
[vue3-van3-dict移动端字典包插件](https://www.npmjs.com/package/vue3-vant3-dict)
|
|
87
87
|
|
|
88
|
+
[vue3-van4-dict移动端字典包插件](https://www.xiaobu.host/vue3-vant4-dict)
|
|
89
|
+
|
|
88
90
|
[vue3-water-marker水印插件](https://www.npmjs.com/package/vue3-water-marker)
|
|
89
91
|
|
|
90
92
|
[vue2-water-marker水印插件](https://www.npmjs.com/package/vue2-water-marker)
|
|
91
93
|
|
|
92
94
|
## 更新日志
|
|
93
95
|
|
|
96
|
+
### 3.1.1
|
|
97
|
+
|
|
98
|
+
1. 【优化】`requestWithRetry`兼容下请求方法大小写
|
|
99
|
+
2. 【修复】修复`abortAllRequests`方法未上传的bug
|
|
100
|
+
3. 【优化】将超时重传默认时间从3秒改为10秒
|
|
101
|
+
|
|
102
|
+
### 3.1.0
|
|
103
|
+
|
|
104
|
+
1. 【优化】新增`abortAllRequests`中断所有请求的方法，用于切换路由时调用。
|
|
105
|
+
2. 【优化】新增`utils.js`文件,暴露`createCancelableRequest`,`requestWithRetry`方法，`createCancelableRequest`方法用于实现需要主动中断请求的接口，`requestWithRetry`方法用于实现需要超时重试的接口。
|
|
106
|
+
3. 【提示】`removeCache`这个方法很早就有，这个版本提示下吧 可以用于清除接口缓存的数据。
|
|
107
|
+
|
|
94
108
|
### 3.0.0
|
|
95
109
|
|
|
96
110
|
1. 【优化】无感知续签AccessToken时无需配置多余请求头
|
|
@@ -107,7 +121,7 @@ module.exports = {
|
|
|
107
121
|
|
|
108
122
|
### 2.1.0
|
|
109
123
|
|
|
110
|
-
1. 【优化】新增timeout配置，实现缓存数据时的伪加载时间，从缓存中获取数据时会触发 showLoadingFun， timeout毫秒后会执行hideLoadingFun
|
|
124
|
+
1. 【优化】新增timeout配置，实现缓存数据时的伪加载时间，从缓存中获取数据时会触发 showLoadingFun， timeout毫秒后会执行hideLoadingFun
|
|
111
125
|
|
|
112
126
|
### 2.0.9
|
|
113
127
|
|
|
@@ -135,7 +149,7 @@ module.exports = {
|
|
|
135
149
|
2. 【功能】无感知刷新token的代码逻辑变更
|
|
136
150
|
3. 【修复】配置高并发请求数量后，取消请求存在取消不了的情况
|
|
137
151
|
4. 【优化】配置接口缓存后，新增可删除接口缓存的功能
|
|
138
|
-
5. 【注意】options配置变化，及接口捕获异常处的逻辑判断
|
|
152
|
+
5. 【注意】options配置变化，及接口捕获异常处的逻辑判断
|
|
139
153
|
|
|
140
154
|
### 2.0.1
|
|
141
155
|
|
|
@@ -143,7 +157,7 @@ module.exports = {
|
|
|
143
157
|
注意：如下几种情况不建议配置缓存
|
|
144
158
|
1. 表单提交的接口
|
|
145
159
|
2. 数据频繁更新的接口
|
|
146
|
-
3. 删除数据接口
|
|
160
|
+
3. 删除数据接口
|
|
147
161
|
|
|
148
162
|
### 2.0.0
|
|
149
163
|
|
|
@@ -179,4 +193,4 @@ module.exports = {
|
|
|
179
193
|
|
|
180
194
|
### 1.0.0
|
|
181
195
|
|
|
182
|
-
1. 初始版本
|
|
196
|
+
1. 初始版本
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class e{instance;requestObj={};requestingNum=0;queue=[];isRefresh=!1;isShowReLoginDialog=!1;runningCount=0;maxReqNum=6;tasks=[];cache;cacheNum=10;status="start";runingReqKeys=[];showLoadingFun=()=>{};hideLoadingFun=()=>{};timeout=300;add(e,t,s){return new Promise(((i,n)=>{try{if("pause"===this.status||"prevent"===s?.preventDuplicateRequestsType){if(this.tasks.some((e=>e.requestKey===t))||this.runingReqKeys.includes(t))return}if("cancel"===s?.preventDuplicateRequestsType){if(this.tasks.some((e=>e.requestKey===t))&&(this.tasks=this.tasks.filter((e=>e.requestKey!==t))),this.runingReqKeys.includes(t))return this.maxReqNum++,this.runingReqKeys.push(t),this.tasks.unshift({isCancel:!0,task:e,requestKey:t,config:s,resolve:i,reject:n}),void this._run()}this.runingReqKeys.push(t),this.tasks.push({task:e,requestKey:t,config:s,resolve:i,reject:n}),this._run()}catch(e){n(e)}}))}_pause(){this.status="pause"}_start(){this.status="start",this._run()}_run(){if("pause"!==this.status)for(;this.runningCount<this.maxReqNum&&this.tasks.length>0;){const{isCancel:e,task:t,requestKey:s,config:i,resolve:n,reject:r}=this.tasks.shift();e&&this.maxReqNum--,this.runningCount++,t().then((e=>{this.runningCount--,"[object Object]"===Object.prototype.toString.call(e)&&i?.showIsComplete?n({...e,[i.showIsComplete]:0===this.runningCount}):n(e)})).catch((e=>{if(this.runningCount
|
|
1
|
+
class e{axios;instance;requestConfigObj={};requestObj={};requestingNum=0;queue=[];isRefresh=!1;isShowReLoginDialog=!1;runningCount=0;maxReqNum=6;tasks=[];cache;cacheNum=10;status="start";runingReqKeys=[];showLoadingFun=()=>{};hideLoadingFun=()=>{};timeout=300;abortAllRequests(){Object.keys(this.requestObj).forEach((e=>{const t=this.requestObj[e],s=this.requestConfigObj[e];t.cancel(s)}))}abortRequestByConfig(e){const t=this.generateKeyByConfig(e);this.requestObj[t]&&(this.requestObj[t].cancel(e),delete this.requestObj[t],delete this.requestConfigObj[t])}add(e,t,s){return new Promise(((i,n)=>{try{if("pause"===this.status||"prevent"===s?.preventDuplicateRequestsType){if(this.tasks.some((e=>e.requestKey===t))||this.runingReqKeys.includes(t))return}if("cancel"===s?.preventDuplicateRequestsType){if(this.tasks.some((e=>e.requestKey===t))&&(this.tasks=this.tasks.filter((e=>e.requestKey!==t))),this.runingReqKeys.includes(t))return this.maxReqNum++,this.runingReqKeys.push(t),this.tasks.unshift({isCancel:!0,task:e,requestKey:t,config:s,resolve:i,reject:n}),void this._run()}this.runingReqKeys.push(t),this.tasks.push({task:e,requestKey:t,config:s,resolve:i,reject:n}),this._run()}catch(e){n(e)}}))}_pause(){this.status="pause"}_start(){this.status="start",this._run()}_run(){if("pause"!==this.status)for(;this.runningCount<this.maxReqNum&&this.tasks.length>0;){const{isCancel:e,task:t,requestKey:s,config:i,resolve:n,reject:r}=this.tasks.shift();e&&this.maxReqNum--,this.runningCount++,t().then((e=>{this.runningCount--,"[object Object]"===Object.prototype.toString.call(e)&&i?.showIsComplete?n({...e,[i.showIsComplete]:0===this.runningCount}):n(e)})).catch((e=>{if(this.runningCount--,!this.axios.isCancel(e)&&i?.removeRemainingTasksWhenError){const e=this.tasks.map((e=>e.requestKey));this.tasks=[],this.runingReqKeys=this.runingReqKeys.filter((t=>!e.includes(t)))}r(e)})).finally((()=>{this.runingReqKeys.splice(this.runingReqKeys.indexOf(s),1),this._run()}))}}getCache(e,t){const{url:s,data:i={},config:n,method:r}=t;return new Promise(((t,h)=>{if(!this.cache.has(e)){delete n.cache;return void(["get","delete"].includes(r)?this[r](s,n):this[r](s,i,n)).then((s=>{this.setCache(e,s),t(s)})).catch((e=>{h(e)}))}const a=this.cache.get(e);this.cache.delete(e),this.cache.set(e,a),n.noShowLoading?t(a):(this.showLoadingFun(),setTimeout((()=>{this.hideLoadingFun(),t(a)}),this.timeout))}))}setCache(e,t){if(this.cache.has(e)&&this.cache.delete(e),this.cache.set(e,t),this.cache.size>this.cacheNum){const e=this.cache.keys().next().value;this.cache.delete(e)}}removeCache(){this.cache&&this.cache.clear()}get(e,t){if(t.cache){const s={url:e,config:t,method:"get"},i=t.params,n=this.generateKey(s,i);return this.getCache(n,s)}const s=t.params;if(delete t.params,t.isRefreshToken)return this.instance.request({url:e,params:s,...t,method:"GET"});const i=t.fullPath?this.generateKey({url:e,method:"get"},s):"GET#"+e;return this.add((()=>this.instance.request({url:e,params:s,...t,method:"GET"})),i,t)}post(e,t={},s={}){if(s.cache){const i={url:e,data:t,config:s,method:"post"},n=this.generateKey(i,t);return this.getCache(n,i)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"POST"});const i=s.fullPath?this.generateKey({url:e,method:"post"},t):"POST#"+e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"POST"})),i,s)}delete(e,t={}){if(t.cache){const s={url:e,config:t,method:"delete"},i=t.params||t.data||{},n=this.generateKey(s,i);return this.getCache(n,s)}if(t.params){const s=t?.params||{};if(delete t.params,t.isRefreshToken)return this.instance.request({url:e,params:s,...t,method:"DELETE"});const i=t.fullPath?this.generateKey({url:e,method:"delete"},s):"DELETE#"+e;return this.add((()=>this.instance.request({url:e,params:s,...t,method:"DELETE"},i,t)))}const s=t?.data||{};if(delete t.data,t.isRefreshToken)return this.instance.request({url:e,data:s,...t,method:"DELETE"});const i=t.fullPath?this.generateKey({url:e,method:"delete"},s):"DELETE#"+e;return this.add((()=>this.instance.request({url:e,data:s,...t,method:"DELETE"},i,t)))}patch(e,t={},s={}){if(s.cache){const i={url:e,data:t,config:s,method:"patch"},n=this.generateKey(i,t);return this.getCache(n,i)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"PATCH"});const i=s.fullPath?this.generateKey({url:e,method:"patch"},t):"PATCH#"+e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PATCH"},i,s)))}put(e,t={},s={}){if(s.cache){const i={url:e,data:t,config:s,method:"put"},n=this.generateKey(i,t);return this.getCache(n,i)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"PUT"});const i=s.fullPath?this.generateKey({url:e,method:"put"},t):"PUT#"+e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PUT"},i,s)))}generateKey(e,t){const{method:s,url:i}=e;let n=s+"#"+i;const r=[];for(const[e,s]of Object.entries(t))r.push(`${e}=${s}`);return r.length>0&&(n+="?"+r.join("&")),n}generateKeyByConfig(e){if(e.isRefreshToken||!e.fullPath)return e.url;const{url:t,method:s,data:i,params:n}=e;let r={};try{i&&Object.assign(r,JSON.parse(i))}catch{r={}}n&&Object.assign(r,n);const h={url:t,method:s};return this.generateKey(h,r)}constructor(e,t,s){this.axios=e;const i=s.code||"code",n=s.authorizationKey||"Authorization",r=s.responseTypesStr||"arraybuffer,blob",h=s.setAuthorizationFun||function(e,t){return e.headers[n]=t,e};s.showLoadingFun&&(this.showLoadingFun=s.showLoadingFun),s.hideLoadingFun&&(this.hideLoadingFun=s.hideLoadingFun),this.timeout=s?.timeout||this.timeout,this.maxReqNum=s?.maxReqNum||this.maxReqNum,this.cacheNum=s?.cacheNum||this.cacheNum,this.cache=new Map,this.instance=t,this.instance.interceptors.request.use((t=>{const s=this.generateKeyByConfig(t);t?.noShowLoading||(this.requestingNum++,this.showLoadingFun(t,this.requestingNum));t.url&&t.preventDuplicateRequestsType&&"cancel"===t.preventDuplicateRequestsType&&this.requestObj[s]&&this.requestObj[s].cancel({config:t});const i=e.CancelToken;return this.requestObj[s]=i.source(),t.cancelToken=this.requestObj[s].token,this.requestConfigObj[s]=t,t}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:t,responseErr:a}=e,u=this.generateKeyByConfig(t);if(t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},this.requestConfigObj={},this.hideLoadingFun(t,this.requestingNum))),t&&(this.requestObj[u]&&delete this.requestObj[u],this.requestConfigObj[u]&&delete this.requestConfigObj[u]),a){if(s.openRefresh){const r=s.accessTokenExpirationCode||401;if(Number(e[i])===r){this._pause();const i=s.getRefreshTokenFun();if(!i){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,this.removeCache(),s.reloginFun(e),Promise.reject(e||"Error")}if(this.isRefresh)return new Promise((e=>{this.queue.push((()=>{e(this.instance.request(t))}))}));this.isRefresh=!0;try{const e=t.headers[n],r=s.getAuthorizationFun();return e!==r?(this._start(),this.instance.request(h(t,r))):(await s.refreshTokenStore(i),this._start(),this.queue.forEach((e=>e())),this.instance.request(t))}catch{if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,this.removeCache(),s.reloginFun(e),Promise.reject(e||"Error")}finally{this.queue=[],this.isRefresh=!1}}const a=s.refreshTokenExpirationCode||403;if(Number(e[i])===a){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,this.removeCache(),s.reloginFun(e),Promise.reject(e||"Error")}}return Promise.reject(e||"Error")}if(r.toLocaleLowerCase().split(",").includes(t?.responseType?.toLocaleLowerCase()))return e.data;const o=JSON.parse(JSON.stringify(e));return t.cache||delete o.responseErr,delete o.config,s.responseResultFun?s.responseResultFun(o):o}),(t=>{const i=t?.message?.config||{},n=this.generateKeyByConfig(i);return i?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},this.requestConfigObj={},s.hideLoadingFun&&s.hideLoadingFun(i,this.requestingNum))),e.isCancel(t)||delete this.requestObj[n],delete this.requestConfigObj[n],Promise.reject(t)}))}}export default e;
|
package/package.json
CHANGED
package/utils.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"axios";export function createCancelableRequest(t,a,n,c={},r={}){if(a=a.toLowerCase(),!t||"function"!=typeof t[a])throw new Error(`createCancelableRequest：axiosInstance 不存在 ${a} 方法`);const s=e.CancelToken.source(),o={...r,cancelToken:s.token};return{request:()=>{let e;return["get","delete"].includes(a)?e=t[a](n,c):["post","patch","put"].includes(a)&&(e=t[a](n,c,o)),e},cancel:()=>{if(["get","delete"].includes(a)){const e={url:n,method:a,data:c.data||{},params:c.params||{}};t.abortRequestByConfig(e)}else if(["post","patch","put"].includes(a)){const e={url:n,method:a,data:c,config:e};t.abortRequestByConfig(e)}}}}export function requestWithRetry(t,a,n,c={},r={}){if(a=a.toLowerCase(),!t||"function"!=typeof t[a])throw new Error(`createCancelableRequest：axiosInstance 不存在 ${a} 方法`);let s,o,l=0,i=null,u=!1,m=!1;["get","delete"].includes(a)?m=c?.widthCancel||m:["post","put","patch"].includes(a)&&(m=r?.widthCancel||!1),i=()=>{u=!0,o()};const d=()=>new Promise(((i,p)=>{let C=1e4,h=3,f="请求超时，重试中",R={};if(["get","delete"].includes(a)){C=c?.timeout||C,h=c?.maxRetryTimes||h,f=c?.retryMessage||f,R={...c,timeout:C,maxRetryTimes:h,currentRetryTimes:l,isManualCancel:u,widthCancel:m};const{request:e,cancel:r}=createCancelableRequest(t,a,n,R);s=e,o=r}else if(["post","put","patch"].includes(a)){C=r?.timeout||C,h=r?.maxRetryTimes||h,f=r?.retryMessage||f,R={...r,timeout:C,maxRetryTimes:h,currentRetryTimes:l,isManualCancel:u,widthCancel:m};const{request:e,cancel:i}=createCancelableRequest(t,a,n,c,R);s=e,o=i}const y=setTimeout((()=>{o(`请求超时（${C}ms），准备重试`),l++,l<=h&&!u?(console.log(`${f}，当前重试次数：${l}/${h}`),d().then((e=>i(e))).catch((e=>p(e)))):p({name:"RetryExhaustedError",message:`请求超时，已重试${l-1}次，${u?"手动":"自动"}停止重试`,retryTimes:l,config:R})}),C);s().then((e=>{clearTimeout(y),i(e)})).catch((t=>{clearTimeout(y),"CanceledError"===t?.name&&u?p(t):"ECONNABORTED"===t?.code||e.isCancel(t)||p(t)}))})),p=()=>(l=0,u=!1,d());return m?{request:p,cancel:i}:p()}
|