vue-axios-optimize 1.0.8 → 2.0.1

package/README.md

@@ -1,6 +1,6 @@
 # vue-axios-optimize使用说明
 
-vue-axios-optimize是一个对axios请求优化的vue插件包，引入此包之后，并进行相关配置，即可轻松实现全局请求加载动画，重复请求时取消前面的请求或者阻止后面的请求。
+vue-axios-optimize是一个对axios请求优化的vue插件包，引入此包之后，并进行相关配置，即可轻松实现全局请求加载动画，重复请求时取消前面的请求或者阻止后面的请求，并且可实现请求并发数量控制。
 
 ## 安装
 
@@ -49,7 +49,7 @@ const AxiosOptimize = new axiosOptimize(axios, instance, {
   }
 })
 
-export default AxiosOptimize.instance
+export default AxiosOptimize
 ```
 
 **配置无感知刷新token时**  axios-optimize.js文件内容大致如下  
@@ -97,7 +97,7 @@ const AxiosOptimize = new axiosOptimize(axios, instance, {
   }
 })
 
-export default AxiosOptimize.instance
+export default AxiosOptimize
 ```
 
 
@@ -176,114 +176,42 @@ import axiosOptimize from '@/api/axios-optimize.js'
 // 需要配置 请求接口时 不加载全局动画 则 配置  noShowLoading: true
 // 需要配置 重复请求时 取消前面的请求 则 配置  preventDuplicateRequestsType: "cancel" 
 // 需要配置 重复请求时 禁用后面的请求 则 配置  preventDuplicateRequestsType: "prevent" 
+// 需要配置 接口缓存的 则 配置  cache: true    否则  配置为false 或者不配置     配置后该接口将进行缓存 （V2.0.1及以上）
 
-// get 请求demo 1
-export function getDemo1(
+// get 请求demo
+export function getDemo(
   data = {},
   config = {
     noShowLoading: true, // 配置不展示加载动画
    	preventDuplicateRequestsType: "cancel" // 配置重复请求时 取消前面的请求
   }
 ) {
-  return axiosOptimize.get(`/xiaobu-admin/getDemo1`, { params: data, ...config })
+  return axiosOptimize.get(`/xiaobu-admin/getDemo`, { params: data, ...config })
 }
 
-// get 请求 demo 2
-export function getDemo2(
-  data = {},
-  config = {
-    preventDuplicateRequestsType: "prevent" // 配置重复请求时 后面的请求无效
-  }
-) {
-  return axiosOptimize({
-    method: 'get',
-    url: `/xiaobu-admin/getDemo2`,
-    params: data,
-    ...config
-  })
-}
-
-// post 请求demo 1
-export function postDemo1(data = {}, config = {}) {
-  return axiosOptimize.post('/xiaobu-admin/postDemo1', data, config)
-}
-
-// post 请求demo 2
-export function postDemo2(data = {}, config = {}) {
-  return axiosOptimize({
-    url: '/xiaobu-admin/postDemo2',
-    method: 'post',
-    data,
-    ...config
-  })
-}
-
-// delete 请求demo 1  使用params作为参数 参数会拼接在请求路径上
-export function deleteDemo1(
-  data = {},
-  config = {
-    noShowLoading: true // 配置不展示加载动画
-  }
-) {
-  return axiosOptimize.delete(`/xiaobu-admin/deleteDemo1`, { params: data, ...config })
+// post 请求demo
+export function postDemo(data = {}, config = {}) {
+  return axiosOptimize.post(`/xiaobu-admin/postDemo`, data, config)
 }
 
-// delete 请求 demo 2 使用params作为参数 参数会拼接在请求路径上
-export function deleteDemo2(
-  data = {},
-  config = {}
-) {
-  return axiosOptimize({
-    method: 'delete',
-    url: `/xiaobu-admin/deleteDemo2`,
-    params: data,
-    ...config
-  })
+// delete 请求demo1 使用data作为参数 参数不展示在  请求路径上
+export function deleteDemo1(data = {}, config = {}) {
+  return axiosOptimize.delete(`/xiaobu-admin/deleteDemo1`, { data, ...config })
 }
 
-// delete 请求demo 3  使用data作为参数 参数不展示在  请求路径上
-export function deleteDemo3(data = {}, config = {}) {
-  return axiosOptimize.delete(`/xiaobu-admin/deleteDemo3`, { data, ...config })
+// delete 请求demo2 使用params作为参数 参数展示在  请求路径上
+export function deleteDemo2(data = {}, config = {}) {
+  return axiosOptimize.delete(`/xiaobu-admin/deleteDemo2`, { params: data, ...config })
 }
 
-// delete 请求 demo 4 使用data作为参数 参数不展示在  请求路径上
-export function deleteDemo4(data = {}, config = {}) {
-  return axiosOptimize({
-    method: 'delete',
-    url: `/xiaobu-admin/deleteDemo4`, 
-    data,
-    ...config
-  })
-}
-
-// put 请求demo 1
+// put 请求demo
 export function putDemo1(data = {}, config = {}) {
-  return axiosOptimize.put('/xiaobu-admin/putDemo1', data, config)
-}
-
-// put 请求demo 2
-export function putDemo2(data = {}, config = {}) {
-  return axiosOptimize({
-    url: '/xiaobu-admin/putDemo2',
-    method: 'put',
-    data,
-    ...config
-  })
+  return axiosOptimize.put(`/xiaobu-admin/putDemo`, data, config)
 }
 
-// patch 请求demo 1
+// patch 请求demo
 export function patchDemo1(data = {}, config = {}) {
-  return axiosOptimize.patch('/xiaobu-admin/patchDemo1', data, config)
-}
-
-// patch 请求demo 2
-export function patchDemo2(data = {}, config = {}) {
-  return axiosOptimize({
-    url: '/xiaobu-admin/patchDemo2',
-    method: 'patch',
-    data,
-    ...config
-  })
+  return axiosOptimize.patch(`/xiaobu-admin/patchDemo`, data, config)
 }
 
 ```
@@ -313,6 +241,7 @@ export function patchDemo2(data = {}, config = {}) {
 | accessTokenExpirationCode                                | number   | 配置accessToken过期返回的业务状态码                          | 非必传                    | 401                                 |
 | refreshTokenExpirationCode                               | number   | 配置refreshToken过期返回的业务状态码                         | 非必传                    | 403                                 |
 | responseTypesStr（v1.0.2）                               | String   | 配置数据返回类型，实现当此类型时返回原封不动的响应数据的data数据 | 非必传                    | 无                                  |
+| maxReqNum      （v2.0.0）                                | Number   | 最大同时请求数量                                             | 非必传                    | 4                                   |
 
 ## store/modules/user.js代码大致如下
 
@@ -422,7 +351,7 @@ module.exports = {
 
 如有疑问，可关注微信公众号【爆米花小布】进行咨询。 
 
-![微信公众号](https://shenxiaobu.github.io/global-static/img/gongzhonghao_wechat.png)
+![微信公众号](http://qiniu.xiaobusoft.com/npm/gongzhonghao_wechat.png)
 
 微信公众号【爆米花小布】，抖音号【爆米花小布】  更多好玩的插件
 
@@ -438,6 +367,20 @@ module.exports = {
 
 ## 更新日志
 
+### 2.0.1
+
+1. 【功能】实现接口缓存配置   options新增配置 cacheNum  配置最大缓存数量, 接口配置处可配置 cache: true。
+    注意：如下几种情况不建议配置缓存
+    1. 表单提交的接口
+    2. 数据频繁更新的接口
+    3. 删除数据接口 
+
+### 2.0.0
+
+1. 【功能】实现并发请求数量控制，options新增maxReqNum参数配置 默认值为 4 ，表示同时可请求4个接口，剩余的接口陆续排队
+2. 【优化】当接口返回数据格式为对象格式时，会多添加一个 IS_COMPLETE  表示当前全部请求任务是否已完成
+3. 【调整】2.0.0版本 axios-optimize.js 文件不暴露 instance实例，且接口调用方法仅 支持 .get  .post .delete .patch .put 形式调用， 具体查看文档示例
+
 ### 1.0.8
 
 1. 【优化】废除options的setAccessTokenFun配置项

package/index.js

@@ -1 +1 @@
-class e{instance;requestObj={};requestingNum=0;authErrorArr=[];queue=[];isRefresh=!1;isShowReLoginDialog=!1;constructor(e,r,s){this.instance=r,this.instance.interceptors.request.use((r=>{r?.noShowLoading||(this.requestingNum++,s.showLoadingFun&&s.showLoadingFun(r,this.requestingNum));const i=r.url;if(s.openRefresh){-1===this.authErrorArr.indexOf(i)&&this.isRefresh&&i!==s.refreshApiUrl&&this.authErrorArr.push(i)}if(i&&r.preventDuplicateRequestsType)if("cancel"===r.preventDuplicateRequestsType){this.requestObj[i]&&this.requestObj[i].cancel({config:r,isCancel:!0});const s=e.CancelToken;this.requestObj[i]=s.source(),r.cancelToken=this.requestObj[i].token}else if("prevent"===r.preventDuplicateRequestsType){if("requesting"===this.requestObj[i])return Promise.reject({config:r,isPrevent:!0});this.requestObj[i]="requesting"}return r}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:r,responseErr:i}=e;if(r?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(r,this.requestingNum))),r&&this.requestObj[r.url]&&delete this.requestObj[r.url],i){if(s.openRefresh){const i=this.authErrorArr.indexOf(r.url);if(-1!==i)return this.authErrorArr.splice(i,1),new Promise((e=>{this.queue.push((()=>{e(this.instance.request(r))}))}));const t=s.accessTokenExpirationCode||401;if(Number(e.code)===t){const i=s.getRefreshTokenFun();if(!i){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}if(this.isRefresh)return new Promise((e=>{this.queue.push((()=>{e(this.instance.request(r))}))}));this.isRefresh=!0;try{return await s.refreshTokenStore(i),this.queue.forEach((e=>e())),this.instance.request(r)}catch{if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}finally{this.queue=[],this.isRefresh=!1}}const n=s.refreshTokenExpirationCode||403;if(Number(e.code)===n){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}}return Promise.reject(new Error(e.message||"Error"))}if(s?.responseTypesStr?.toLocaleLowerCase().split(",").includes(r?.responseType?.toLocaleLowerCase()))return e.data;const t=JSON.parse(JSON.stringify(e));return delete t.responseErr,delete t.config,s.responseResultFun?s.responseResultFun(t):t}),(e=>{const r=e.config||e?.message?.config||{};return r?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(r,this.requestingNum))),e.isPrevent||e?.message?.isCancel||delete this.requestObj[r.url],Promise.reject(e)}))}}export default e;
+class e{instance;requestObj={};requestingNum=0;authErrorArr=[];queue=[];isRefresh=!1;isShowReLoginDialog=!1;runningCount=0;maxReqNum=4;tasks=[];cache;cacheNum=10;add(e){return new Promise(((t,s)=>{this.tasks.push({task:e,resolve:t,reject:s}),this._run()}))}_run(){for(;this.runningCount<this.maxReqNum&&this.tasks.length>0;){const{task:e,resolve:t,reject:s}=this.tasks.shift();this.runningCount++,e().then((e=>{this.runningCount--,"[object Object]"!==Object.prototype.toString.call(e)?t(e):t({...e,IS_COMPLETE:0===this.runningCount})})).catch((e=>{this.runningCount--,s(e)})).finally((()=>{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)}))}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)}}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;return delete t.params,this.add((()=>this.instance.request({url:e,params:s,...t,method:"GET"})))}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)}return this.add((()=>this.instance.request({url:e,data:t,...s,method:"POST"})))}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||{};return delete t.params,this.add((()=>this.instance.request({url:e,params:s,...t,method:"DELETE"})))}const s=t?.data||{};return delete t.data,this.add((()=>this.instance.request({url:e,data:s,...t,method:"DELETE"})))}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)}return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PATCH"})))}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)}return this.add((()=>this.instance.request({url:e,data:t,...s,method:"PUT"})))}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}constructor(e,t,s){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=>{t?.noShowLoading||(this.requestingNum++,s.showLoadingFun&&s.showLoadingFun(t,this.requestingNum));const r=t.url;if(s.openRefresh){-1===this.authErrorArr.indexOf(r)&&this.isRefresh&&r!==s.refreshApiUrl&&this.authErrorArr.push(r)}if(r&&t.preventDuplicateRequestsType)if("cancel"===t.preventDuplicateRequestsType){this.requestObj[r]&&this.requestObj[r].cancel({config:t,isCancel:!0});const s=e.CancelToken;this.requestObj[r]=s.source(),t.cancelToken=this.requestObj[r].token}else if("prevent"===t.preventDuplicateRequestsType){if("requesting"===this.requestObj[r])return Promise.reject({config:t,isPrevent:!0});this.requestObj[r]="requesting"}return t}),(e=>Promise.reject(e))),this.instance.interceptors.response.use((async e=>{const{config:t,responseErr:r}=e;if(t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),t&&this.requestObj[t.url]&&delete this.requestObj[t.url],r){if(s.openRefresh){const r=this.authErrorArr.indexOf(t.url);if(-1!==r)return this.authErrorArr.splice(r,1),new Promise((e=>{this.queue.push((()=>{e(this.instance.request(t))}))}));const i=s.accessTokenExpirationCode||401;if(Number(e.code)===i){const r=s.getRefreshTokenFun();if(!r){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}if(this.isRefresh)return new Promise((e=>{this.queue.push((()=>{e(this.instance.request(t))}))}));this.isRefresh=!0;try{return await s.refreshTokenStore(r),this.queue.forEach((e=>e())),this.instance.request(t)}catch{if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}finally{this.queue=[],this.isRefresh=!1}}const n=s.refreshTokenExpirationCode||403;if(Number(e.code)===n){if(this.isShowReLoginDialog)return;return this.isShowReLoginDialog=!0,s.reloginFun(e),Promise.reject(new Error(e.message||"Error"))}}return Promise.reject(new Error(e.message||"Error"))}if(s?.responseTypesStr?.toLocaleLowerCase().split(",").includes(t?.responseType?.toLocaleLowerCase()))return e.data;const i=JSON.parse(JSON.stringify(e));return delete i.responseErr,delete i.config,s.responseResultFun?s.responseResultFun(i):i}),(e=>{const t=e.config||e?.message?.config||{};return t?.noShowLoading||(this.requestingNum--,this.requestingNum<=0&&(this.requestObj={},s.hideLoadingFun&&s.hideLoadingFun(t,this.requestingNum))),e.isPrevent||e?.message?.isCancel||delete this.requestObj[t.url],Promise.reject(e)}))}}export default e;

package/package.json

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