From 05aea0c610bd85a0e97eebd266e048aa0749e709 Mon Sep 17 00:00:00 2001
From: dengfuchuan <389068019@qq.com>
Date: Tue, 22 Jun 2021 17:21:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=AF=B7=E6=B1=82=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=80=9A=E7=94=A8=20loading=20=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/loading.js | 21 +++++++++++++++++++++
 src/utils/request.js |  4 ++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/utils/loading.js

diff --git a/src/utils/loading.js b/src/utils/loading.js
new file mode 100644
index 00000000..c6bddf5e
--- /dev/null
+++ b/src/utils/loading.js
@@ -0,0 +1,21 @@
+import { Loading } from 'element-ui'
+
+let loadingInstance
+export const loading = {
+  loadingCount: 0,
+  open() {
+    this.loadingCount === 0 && (loadingInstance = Loading.service({
+      lock: true,
+      text: '加载中',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    }))
+    this.loadingCount++
+  },
+  close() {
+    setTimeout(() => {
+      this.loadingCount--
+      this.loadingCount === 0 && loadingInstance && loadingInstance.close()
+    }, 20)
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 279a02db..de674b55 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -3,6 +3,7 @@ import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import router from '@/router'
+import { loading } from './loading'
 
 // create an axios instance
 const service = axios.create({
@@ -15,6 +16,7 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
+    loading.open()
 
     if (store.getters.token) {
       // let each request carry token
@@ -25,6 +27,7 @@ service.interceptors.request.use(
     return config
   },
   error => {
+    loading.close()
     // do something with request error
     console.log(error) // for debug
     return Promise.reject(error)
@@ -44,6 +47,7 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
+    loading.close()
     const res = response
     // if the custom code is not 20000, it is judged as an error.
     if (res.status !== 200) {