超时遮罩封装

QMPlusVuePage/src/utils/request.js

@@ -1,15 +1,36 @@
 import axios from 'axios'; // 引入axios
-import { Message } from 'element-ui';
+import { Message, Loading } from 'element-ui';
 import { store } from '@/store/index'
-
 const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API,
     timeout: 99999
 })
+let acitveAxios = 0
+let loadingInstance
+let timer
+const showLoading = () => {
+    acitveAxios++
+    if (timer) {
+        clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+        if (acitveAxios > 0) {
+            loadingInstance = Loading.service({ fullscreen: true })
+        }
+    }, 400);
+}
 
-//http request 拦截器
+const closeLoading = () => {
+        acitveAxios--
+        if (acitveAxios <= 0) {
+            clearTimeout(timer)
+            loadingInstance && loadingInstance.close()
+        }
+    }
+    //http request 拦截器
 service.interceptors.request.use(
     config => {
+        showLoading()
         const token = store.getters['user/token']
         config.data = JSON.stringify(config.data);
         config.headers = {
@@ -19,6 +40,7 @@ service.interceptors.request.use(
         return config;
     },
     error => {
+        closeLoading()
         Message({
             showClose: true,
             message: error,
@@ -32,6 +54,7 @@ service.interceptors.request.use(
 //http response 拦截器
 service.interceptors.response.use(
     response => {
+        closeLoading()
         if (response.data.success) {
             return response.data
         } else {
@@ -47,6 +70,7 @@ service.interceptors.response.use(
         }
     },
     error => {
+        closeLoading()
         Message({
             showClose: true,
             message: error,

QMPlusVuePage/src/view/example/upload/upload.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading.fullscreen.lock="fullscreenLoading">
     <el-upload
       :action="`${path}/fileUploadAndDownload/upload`"
       :before-upload="checkFile"
@@ -64,6 +64,7 @@ export default {
   mixins: [infoList],
   data() {
     return {
+      fullscreenLoading:false,
       listApi: getFileList,
       listKey: 'list',
       path: path,
@@ -121,14 +122,17 @@ export default {
         })
     },
     checkFile(file) {
+      this.fullscreenLoading = true
       const isJPG = file.type === 'image/jpeg'
       const isPng = file.type === 'image/png'
       const isLt2M = file.size / 1024 / 1024 < 2
       if (!isJPG && !isPng) {
         this.$message.error('上传头像图片只能是 JPG或png 格式!')
+        this.fullscreenLoading = false
       }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.fullscreenLoading = false
       }
       return (isPng || isJPG) && isLt2M
     },
@@ -140,12 +144,15 @@ export default {
       if (res.success) {
         this.getTableData()
       }
+        this.fullscreenLoading = false
     },
     uploadError() {
       this.$message({
         type: 'error',
         message: '上传失败'
       })
+        this.fullscreenLoading = false
+
     },
     downloadFile(row) {
       downloadImage(row.url, row.name)