axios 中loading封装

src/plugins/axios.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:57:48
- * @LastEditTime: 2021-11-09 15:56:37
+ * @LastEditTime: 2021-11-09 17:33:31
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\plugins\axios.js
@@ -14,8 +14,8 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import store from "../store";
 import { Loading } from 'element-ui';
-let loadingInstance;
-
+var loadingIndex = 0;
+var loadingBoo;
 
 // Full config:  https://github.com/axios/axios#request-config
 // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
@@ -31,13 +31,18 @@ let config = {
   //   Authorization: localStorage.getItem("token") || ""
   // }
 };
-
 const _axios = axios.create(config);
 
+var loading;
 _axios.interceptors.request.use(
-  function(config) {
+  function (config) {
+    loadingBoo = (!config.loading && typeof config.loading == 'boolean') ? config.loading : true;
+    // debugger;
     // 进度条
-    loadingInstance = Loading.service({ fullscreen: true });
+    if (loadingBoo) {
+      if (!loading) loading = Loading.service({ fullscreen: true, text: '正在加载...' });
+      loadingIndex++;
+    }
     NProgress.start();
     // 在发送请求之前做些什么
     // 判断是否存在token,如果存在将每个页面header添加token
@@ -46,7 +51,7 @@ _axios.interceptors.request.use(
     }
     return config;
   },
-  function(error) {
+  function (error) {
     NProgress.start();
     // Do something with request error
     return Promise.reject(error);
@@ -55,9 +60,13 @@ _axios.interceptors.request.use(
 
 // Add a response interceptor
 _axios.interceptors.response.use(
-  function(response) {
+  function (response) {
     NProgress.done();
-    loadingInstance.close()
+    if (loadingBoo) loadingIndex--;
+    if (loadingIndex == 0) {
+      loading && loading.close();
+      loading = null
+    }
     if (response.data.code === 401) {
       localStorage.removeItem("token"); //删除名称为“token”的信息。
       localStorage.removeItem("userName"); //删除名称为“userName”的信息。
@@ -65,15 +74,19 @@ _axios.interceptors.response.use(
     }
     return response;
   },
-  function(error) {
+  function (error) {
     NProgress.done();
-    loadingInstance.close()
+    if (loadingBoo) loadingIndex--;
+    if (loadingIndex == 0) {
+      loading && loading.close();
+      loading = null;
+    }
     // Do something with response error
     return Promise.reject(error);
   }
 );
 
-Plugin.install = function(Vue) {
+Plugin.install = function (Vue) {
   Vue.axios = _axios;
   window.axios = _axios;
   Object.defineProperties(Vue.prototype, {

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-11-09 10:56:08
+ * @LastEditTime: 2021-11-09 17:26:00
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1611,7 +1611,8 @@ export default {
       if (flag) {
         let res = await this.$axios({
           method: 'get',
-          url: '/api/export/trait/xml/person/' + this.barcode + '/' + this.seq
+          url: '/api/export/trait/xml/person/' + this.barcode + '/' + this.seq,
+          loading: false
           // url: 'http://www.meetfood.cn:2390/traint/export/xml/trait/' + this.barcode + '/' + this.seq
         })
         console.log(res);
@@ -1857,7 +1858,8 @@ export default {
     async directionChange () {
       let res = await this.$axios({
         method: 'get',
-        url: '/api/traint/export/xml/trait/' + this.barcode + '/' + this.seq
+        url: '/api/traint/export/xml/trait/' + this.barcode + '/' + this.seq,
+        loading: false
       })
       console.log(res);
       let deg = res.data.fpt5FingerMsg.zwfx_tzfx
@@ -2475,7 +2477,8 @@ export default {
           },
           // url: 'http://www.meetfood.cn:2390/traint/upload/persontrait?barcode=' + self.barcode + '&seq=' + self.seq,
           url: '/api/upload/trait/person?barcode=' + self.barcode + '&seq=' + self.seq,
-          data: JSON.stringify(fpt5TraitMinutiaList)
+          data: JSON.stringify(fpt5TraitMinutiaList),
+          loading: false
         }).then(res => {
           console.log(res);
           if (res.data.message == 'success') {

src/views/Editor/modules/ryzwbjLeft.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 09:42:07
- * @LastEditTime: 2021-11-05 13:07:42
+ * @LastEditTime: 2021-11-09 17:29:05
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
@@ -255,7 +255,8 @@ export default {
       let self = this
       this.$axios({
         method: 'get',
-        url: `/api/org/roll/${self.id}/${seq}?mnt=1`
+        url: `/api/org/roll/${self.id}/${seq}?mnt=1`,
+        loading: false
         // url: `/api/org/roll/${1}/${seq}?mnt=1`
       }).then(res => {
         // console.log(res);
@@ -282,7 +283,8 @@ export default {
       let self = this
       this.$axios({
         method: 'get',
-        url: `/api/org/plain/${self.id}/${seq}?mnt=1`
+        url: `/api/org/plain/${self.id}/${seq}?mnt=1`,
+        loading: false
         // url: `/api/org/plain/${1}/${seq}?mnt=1`
       }).then(res => {
         // console.log(res);
@@ -314,7 +316,8 @@ export default {
       })
       let res = await this.$axios({
         method: 'get',
-        url: '/api/org/roll/'+self.id+'?mnt=1'
+        url: '/api/org/roll/'+self.id+'?mnt=1',
+        loading: false
         // url: '/api/png/roll/1?mnt=1'
       })
       // console.log(res);
@@ -355,7 +358,8 @@ export default {
       })
       let res = await this.$axios({
         method: 'get',
-        url: '/api/org/plain/'+self.id+'?mnt=1'
+        url: '/api/org/plain/'+self.id+'?mnt=1',
+        loading: false
         // url: '/api/png/plain/1?mnt=1'
       })
       // console.log(res);