Selaa lähdekoodia

1.请求拦截器新增了对post和put请求的全局loading处理,见loadingService

GouGengquan 6 kuukautta sitten
vanhempi
commit
08ef076c33
2 muutettua tiedostoa jossa 44 lisäystä ja 0 poistoa
  1. 35 0
      src/utils/loadingService.js
  2. 9 0
      src/utils/request.js

+ 35 - 0
src/utils/loadingService.js

@@ -0,0 +1,35 @@
+import { Loading } from 'element-ui'
+
+let loading = null;
+
+//开始 加载loading
+const startLoading = () => {
+    loading = Loading.service({
+        lock: true,
+        text: '网络请求中...'
+    })
+}
+
+//结束 取消loading加载
+const endLoading = () => {
+    loading.close()
+}
+
+//showFullScreenLoading() 与 tryHideFullScreenLoading() 目的是合并同一页面多个请求触发loading
+
+let needLoadingRequestCount = 0 //声明一个变量
+
+export const showFullScreenLoading = () => {
+    if (needLoadingRequestCount === 0) { //当等于0时证明第一次请求 这时开启loading
+        startLoading()
+    }
+    needLoadingRequestCount++ //全局变量值++
+}
+
+export const tryHideFullScreenLoading = () => {
+    if (needLoadingRequestCount <= 0) return //小于等于0 证明没有开启loading 此时return
+    needLoadingRequestCount-- //正常响应后 全局变量 --
+    if (needLoadingRequestCount === 0) {  //等于0 时证明全部加载完毕 此时结束loading 加载
+        endLoading()
+    }
+}

+ 9 - 0
src/utils/request.js

@@ -5,6 +5,8 @@ import { getToken } from '@/utils/auth'
 import $router from '@/router'
 import { Loading } from 'element-ui'
 import { POBrowser } from "js-pageoffice";
+
+import {showFullScreenLoading, tryHideFullScreenLoading} from '@/utils/loadingService';
 /*导入加载中*/
 let loadingInstance = null
 
@@ -60,9 +62,14 @@ service.interceptors.request.use(
         text: '正在导入请等待...'
       })
     }
+    // put和post请求加上全屏loading(直接用Loading有些场景下会关不掉,测试下来可能是因为异步请求的原因,建议用封装好的loadingService,处理了多个请求的情况)
+    if ((config.method === 'post' || config.method === 'put') && config.baseURL === '/api') {
+      showFullScreenLoading();
+    }
     return config
   },
   error => {
+    tryHideFullScreenLoading();
     // do something with request error
     console.log(error) // for debug
     return Promise.reject(error)
@@ -85,6 +92,8 @@ service.interceptors.response.use(
     const res = response.data
     // console.log(res)
 
+    tryHideFullScreenLoading();
+
     if (loadingInstance) {
       loadingInstance.close()
     }