vue-axios-optimize 2.0.5 → 2.0.8

package/README.md

@@ -9,6 +9,10 @@ vue-axios-optimize是一个对axios请求优化的vue插件包，引入此包之
 npm install vue-axios-optimize -S
 ```
 
+## axios版本
+
+axios版本建议大于0.27.2 ， 作者测试版本为 "^0.27.2"、"^1.3.4"
+
 ## 引入
 
 在src/api目录下新建axios-optimize.js文件
@@ -34,7 +38,7 @@ axios-optimize.js文件内容大致如下
 ```js
 import axios from "axios"
 import instance from "@/api/axios"
-import axiosOptimize from "@/api/newaxios"
+import axiosOptimize from "vue-axios-optimize"
 import store from "@/store"
 import {MessageBox} from "element-ui"
 
@@ -182,6 +186,8 @@ import axiosRequest from "@/api/axios-optimize"
 // 需要配置 缓存的接口 则 配置  cache: true 否则 配置为 false 或 不配置
 // 需要配置 重复请求时 取消前面的请求 则 配置  preventDuplicateRequestsType: "cancel"
 // 需要配置 重复请求时 禁用后面的请求 则 配置  preventDuplicateRequestsType: "prevent"
+// 需要配置 返回数据是否添加 IS_COMPLETE 是否完成字段 则 配置  showIsComplete: true
+// 需要配置 当同时请求很多接口，且还有很多接口在队列时，有接口报错，是否终止所有队列中的接口请求  removeRemainingTasksWhenError: true
 // 需要配置 全路经（包括入参数据）为接口唯一标识的  则配置  fullPath: true 否则 配置为 false 或 不配置  否则仅仅以URL为唯一标识
 // 当需要配置无感知刷新token时，对于刷新token接口需要配置 isRefreshToken 为true 否则配置为 false 或者不 配置
 
@@ -373,12 +379,22 @@ module.exports = {
 
 [vue2-vant-dict移动端字典包插件](https://www.npmjs.com/package/vue2-vant-dict)
 
+[vue3-van3-dict移动端字典包插件](https://www.npmjs.com/package/vue3-vant3-dict)
+
 [vue3-water-marker水印插件](https://www.npmjs.com/package/vue3-water-marker)
 
 [vue2-water-marker水印插件](https://www.npmjs.com/package/vue2-water-marker)
 
 ## 更新日志
 
+### 2.0.8
+
+1. 【优化】新增showIsComplete参数，实现只有配置了才在请求返回数据中添加 IS_COMPLETE 是否请求完成字段。
+
+### 2.0.6
+
+1. 【优化】新增removeRemainingTasksWhenError参数，实现当某个请求报错时，尽可能的阻止剩余未发起的请求。
+
 ### 2.0.5
 
 1. 【修复】接口报错时，原封不动reject返回原始数据

package/index.js

@@ -1 +1 @@
-class e{instance;requestObj={};requestingNum=0;queue=[];isRefresh=!1;isShowReLoginDialog=!1;runningCount=0;maxReqNum=4;tasks=[];cache;cacheNum=10;status="start";runingReqKeys=[];add(e,t,s){return new Promise(((r,i)=>{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,resolve:r,reject:i}),void this._run()}this.runingReqKeys.push(t),this.tasks.push({task:e,requestKey:t,resolve:r,reject:i}),this._run()}catch(e){i(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,resolve:r,reject:i}=this.tasks.shift();e&&this.maxReqNum--,this.runningCount++,t().then((e=>{this.runningCount--,"[object Object]"!==Object.prototype.toString.call(e)?r(e):r({...e,IS_COMPLETE:0===this.runningCount})})).catch((e=>{this.runningCount--,i(e)})).finally((()=>{this.runingReqKeys.splice(this.runingReqKeys.indexOf(s),1),this._run()}))}}getCache(e,t){const{url:s,data:r={},config:i,method:n}=t;return new Promise(((t,h)=>{if(!this.cache.has(e)){delete i.cache;return void(["get","delete"].includes(n)?this[n](s,i):this[n](s,r,i)).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),t(a)}))}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"},r=t.params,i=this.generateKey(s,r);return this.getCache(i,s)}const s=t.params;if(delete t.params,t.isRefreshToken)return this.instance.request({url:e,params:s,...t,method:"GET"});const r=t.fullPath?this.generateKey({url:e,method:"get"},t.params):e;return this.add((()=>this.instance.request({url:e,params:s,...t,method:"GET"})),r,t)}post(e,t={},s={}){if(s.cache){const r={url:e,data:t,config:s,method:"post"},i=this.generateKey(r,t);return this.getCache(i,r)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"POST"});const r=s.fullPath?this.generateKey({url:e,method:"post"},t):e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"POST"})),r,s)}delete(e,t={}){if(t.cache){const s={url:e,config:t,method:"delete"},r=t.params||t.data||{},i=this.generateKey(s,r);return this.getCache(i,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 r=t.fullPath?this.generateKey({url:e,method:"delete"},t.params):e;return this.add((()=>this.instance.request({url:e,params:s,...t,method:"DELETE"},r,t)))}const s=t?.data||{};if(delete t.data,t.isRefreshToken)return this.instance.request({url:e,data:s,...t,method:"DELETE"});const r=t.fullPath?this.generateKey({url:e,method:"delete"},s):e;return this.add((()=>this.instance.request({url:e,data:s,...t,method:"DELETE"},r,t)))}patch(e,t={},s={}){if(s.cache){const r={url:e,data:t,config:s,method:"patch"},i=this.generateKey(r,t);return this.getCache(i,r)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"PATCH"});const r=s.fullPath?this.generateKey({url:e,method:"patch"},t):e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PATCH"},r,s)))}put(e,t={},s={}){if(s.cache){const r={url:e,data:t,config:s,method:"put"},i=this.generateKey(r,t);return this.getCache(i,r)}if(s.isRefreshToken)return this.instance.request({url:e,data:t,...s,method:"PUT"});const r=s.fullPath?this.generateKey({url:e,method:"put"},t):e;return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PUT"},r,s)))}generateKey(e,t){const{method:s,url:r}=e;let i=s+"#"+r;const n=[];for(const[e,s]of Object.entries(t))n.push(`${e}=${s}`);return n.length>0&&(i+="?"+n.join("&")),i}generateKeyByConfig(e){if(e.isRefreshToken||!e.fullPath)return e.url;const{url:t,method:s,data:r,params:i}=e;let n={};try{r&&Object.assign(n,JSON.parse(r))}catch{n={}}i&&Object.assign(n,i);const h={url:t,method:s};return this.generateKey(h,n)}constructor(e,t,s){const r=s.code||"code",i=s.accessToken||"accessToken",n=s.setAccessTokenFun||function(e,t){return e.headers.Authorization="Bearer "+t,e};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 r=this.generateKeyByConfig(t);t?.noShowLoading||(this.requestingNum++,s.showLoadingFun&&s.showLoadingFun(t,this.requestingNum));if(t.url&&t.preventDuplicateRequestsType&&"cancel"===t.preventDuplicateRequestsType){this.requestObj[r]&&this.requestObj[r].cancel({config:t});const s=e.CancelToken;this.requestObj[r]=s.source(),t.cancelToken=this.requestObj[r].token}return t}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:t,responseErr:h}=e,a=this.generateKeyByConfig(t);if(t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),t&&this.requestObj[a]&&delete this.requestObj[a],h){if(s.openRefresh){const h=s.accessTokenExpirationCode||401;if(Number(e[r])===h){this._pause();const r=s.getRefreshTokenFun();if(!r){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[i],h=s.getAccessTokenFun();return h!==e?(this._start(),this.instance.request(n(t,h))):(await s.refreshTokenStore(r),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[r])===a){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,this.removeCache(),s.reloginFun(e),Promise.reject(e||"Error")}}return Promise.reject(e||"Error")}if(s?.responseTypesStr?.toLocaleLowerCase().split(",").includes(t?.responseType?.toLocaleLowerCase()))return e.data;const u=JSON.parse(JSON.stringify(e));return t.cache||delete u.responseErr,delete u.config,s.responseResultFun?s.responseResultFun(u):u}),(e=>{const t=e?.message?.config||{},r=this.generateKeyByConfig(t);return t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),"CanceledError"!==e?.name&&delete this.requestObj[r],Promise.reject(e)}))}}export default e;
+class e{instance;requestObj={};requestingNum=0;queue=[];isRefresh=!1;isShowReLoginDialog=!1;runningCount=0;maxReqNum=4;tasks=[];cache;cacheNum=10;status="start";runingReqKeys=[];add(e,t,s){return new Promise(((i,r)=>{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:r}),void this._run()}this.runingReqKeys.push(t),this.tasks.push({task:e,requestKey:t,config:s,resolve:i,reject:r}),this._run()}catch(e){r(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:r,reject:n}=this.tasks.shift();e&&this.maxReqNum--,this.runningCount++,t().then((e=>{this.runningCount--,"[object Object]"===Object.prototype.toString.call(e)&&i?.showIsComplete?r({...e,IS_COMPLETE:0===this.runningCount}):r(e)})).catch((e=>{if(this.runningCount--,(e?.name&&"CanceledError"!==e?.name||!e?.name)&&i?.removeRemainingTasksWhenError){const e=this.tasks.map((e=>e.requestKey));this.tasks=[],this.runingReqKeys=this.runingReqKeys.filter((t=>!e.includes(t)))}n(e)})).finally((()=>{this.runingReqKeys.splice(this.runingReqKeys.indexOf(s),1),this._run()}))}}getCache(e,t){const{url:s,data:i={},config:r,method:n}=t;return new Promise(((t,h)=>{if(!this.cache.has(e)){delete r.cache;return void(["get","delete"].includes(n)?this[n](s,r):this[n](s,i,r)).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),t(a)}))}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,r=this.generateKey(s,i);return this.getCache(r,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"},t.params):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"},r=this.generateKey(i,t);return this.getCache(r,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):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||{},r=this.generateKey(s,i);return this.getCache(r,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"},t.params):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):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"},r=this.generateKey(i,t);return this.getCache(r,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):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"},r=this.generateKey(i,t);return this.getCache(r,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):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 r=s+"#"+i;const n=[];for(const[e,s]of Object.entries(t))n.push(`${e}=${s}`);return n.length>0&&(r+="?"+n.join("&")),r}generateKeyByConfig(e){if(e.isRefreshToken||!e.fullPath)return e.url;const{url:t,method:s,data:i,params:r}=e;let n={};try{i&&Object.assign(n,JSON.parse(i))}catch{n={}}r&&Object.assign(n,r);const h={url:t,method:s};return this.generateKey(h,n)}constructor(e,t,s){const i=s.code||"code",r=s.accessToken||"accessToken",n=s.setAccessTokenFun||function(e,t){return e.headers.Authorization="Bearer "+t,e};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 i=this.generateKeyByConfig(t);t?.noShowLoading||(this.requestingNum++,s.showLoadingFun&&s.showLoadingFun(t,this.requestingNum));if(t.url&&t.preventDuplicateRequestsType&&"cancel"===t.preventDuplicateRequestsType){this.requestObj[i]&&this.requestObj[i].cancel({config:t});const s=e.CancelToken;this.requestObj[i]=s.source(),t.cancelToken=this.requestObj[i].token}return t}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:t,responseErr:h}=e,a=this.generateKeyByConfig(t);if(t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),t&&this.requestObj[a]&&delete this.requestObj[a],h){if(s.openRefresh){const h=s.accessTokenExpirationCode||401;if(Number(e[i])===h){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[r],h=s.getAccessTokenFun();return h!==e?(this._start(),this.instance.request(n(t,h))):(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(s?.responseTypesStr?.toLocaleLowerCase().split(",").includes(t?.responseType?.toLocaleLowerCase()))return e.data;const u=JSON.parse(JSON.stringify(e));return t.cache||delete u.responseErr,delete u.config,s.responseResultFun?s.responseResultFun(u):u}),(e=>{const t=e?.message?.config||{},i=this.generateKeyByConfig(t);return t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),"CanceledError"!==e?.name&&delete this.requestObj[i],Promise.reject(e)}))}}export default e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-axios-optimize",
-  "version": "2.0.5",
+  "version": "2.0.8",
   "description": "vue项目对axios请求的优化，实现可配置展示全局加载动画，可配置是否重复请求时取消前面的请求或者阻止后面的请求,已经控制请求并发数量,接口缓存",
   "main": "index.js",
   "scripts": {