添加全局loading

src/layout/components/AppMain.vue

 <template>
-  <section class="app-main">
+  <section class="app-main loadingtext">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />

src/utils/request.js

 import axios from 'axios'
-import {Notification, MessageBox, Message} from 'element-ui'
+import {Notification, MessageBox, Message, Loading} from 'element-ui'
 import store from '@/store'
 import {getToken} from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 
+let loadingRequestCount = 0
+let loadingInstance
+
+const showLoading = () => {
+  if (loadingRequestCount === 0) {
+    loadingInstance = Loading.service({ target: '.loadingtext'})
+  }
+  loadingRequestCount++
+}
+
+const hideLoading = () => {
+  if (loadingRequestCount <= 0) return
+  loadingRequestCount--
+  if (loadingRequestCount === 0) {
+    loadingInstance.close()
+  }
+}
+
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
@@ -14,6 +32,8 @@ const service = axios.create({
 })
 // request拦截器
 service.interceptors.request.use(config => {
+  showLoading()
+
   // 是否需要设置 token
   const isToken = (config.headers || {}).isToken === false
   if (getToken() && !isToken) {
@@ -28,6 +48,10 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
+    setTimeout(() => {
+      hideLoading()
+    }, 200)
+
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 返回所有数据的统一处理
@@ -90,6 +114,10 @@ service.interceptors.response.use(res => {
       return res.data
     }
   }, error => {
+    setTimeout(() => {
+      hideLoading()
+    }, 200)
+
     // --- start ---- 开发时候用这段，把错误彻底抛出来 --- start ---
     let {message} = error;
     if (message == 'Network Error') {