H5-axios加loading

htmldev/dashboard/src/api/request.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import axios from 'axios'
 import router from '../router'
+import _ from 'lodash'
+import { Toast, Notify } from 'vant'
 import { getCookieValue } from '../utils'
 import { platform } from '../utils/platform'
 
@@ -20,6 +22,39 @@ if (platform.isAlipay) {
 } else if (platform.isWeixin) {
   tingbangSource = 'wechat'
 }
+let loading = null
+// 当前正在请求的数量
+let needLoadingRequestCount = 0
+
+// 显示loading
+function showLoading () {
+  if (needLoadingRequestCount === 0 && !loading) {
+    loading = Toast.loading({
+      message: '拼命获取中',
+      forbidClick: true,
+      duration: 0
+    })
+  }
+  needLoadingRequestCount++
+}
+
+// 隐藏loading
+function hideLoading () {
+  needLoadingRequestCount--
+  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0) // 做个保护
+  if (needLoadingRequestCount === 0) {
+    // 关闭loading
+    toHideLoading()
+  }
+}
+
+// 防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
+function toHideLoading () {
+  _.debounce(() => {
+    loading.clear()
+    loading = null
+  }, 300)
+}
 
 // Add a request interceptor
 request.interceptors.request.use(request => {
@@ -36,8 +71,20 @@ request.interceptors.request.use(request => {
     // request.url += '&owner_open_id=0c540a8d284b38f84d2f8ad262ab5d2c'
     request.headers.wechatToken = '0c540a8d284b38f84d2f8ad262ab5d2c'
   }
+  // 判断当前请求是否设置了不显示Loading
+  if (request.showLoading) {
+    showLoading()
+  }
   return request
 }, error => {
+  // 判断当前请求是否设置了不显示Loading
+  if (loading) {
+    hideLoading()
+  }
+  Notify({
+    type: 'warning',
+    message: '请求超时'
+  })
   // Do something with request error
   return Promise.reject(error)
 })
@@ -46,6 +93,9 @@ request.interceptors.request.use(request => {
 request.interceptors.response.use(response => {
   // Do something with response data
   const { code, url } = response.data
+  if (loading) {
+    hideLoading()
+  }
   if (code === 301 && url) {
     Vue.cookie.delete('afhousewechatToken')
     location.replace(url)
@@ -59,6 +109,13 @@ request.interceptors.response.use(response => {
   }
   return response.data
 }, (error) => {
+  if (loading) {
+    hideLoading()
+  }
+  Notify({
+    type: 'danger',
+    message: '数据获取失败！'
+  })
   // Do something with response error
   return Promise.reject(error)
 })

htmldev/dashboard/src/login/index.vue

@@ -163,14 +163,8 @@ export default {
         })
         return
       }
-      const myToast = Toast.loading({
-        message: '提交中...',
-        duration: 1000 * 100,
-        forbidClick: true
-      })
       try {
         const { status, data, msg } = await login(phone, code)
-        myToast.clear()
         if (status) {
           const { token } = data
           clearLoginInfo()
@@ -198,9 +192,7 @@ export default {
           return
         }
         Toast(msg)
-      } catch (err) {
-        myToast.clear()
-      }
+      } catch (err) {}
     }
   }
 }

htmldev/dashboard/src/views/place/list/index.vue

@@ -279,16 +279,10 @@ export default {
         Toast('请预订人名字')
         return
       }
-      const myToast = Toast.loading({
-        message: '加载中...',
-        duration: 1000 * 100,
-        forbidClick: true
-      })
       this.booLock = true
       try {
         const { status, data, msg } = await apiPlacePreOrder(postData)
         this.booLock = false
-        myToast.clear()
         if (status) {
           const officialOrderNumber = data.official_order_number
           // 支付宝支付

htmldev/dashboard/src/views/sell/goods/index.vue

@@ -172,23 +172,15 @@ export default {
       // if (!event._constructed) {
       //   return
       // }
-      const myToast = Toast.loading({
-        message: '加载中...',
-        forbidClick: true,
-        duration: 0
-      })
       try {
         const { data, status, msg } = await apiProductDetail(food.id)
-        myToast.clear()
         if (status) {
           this.selectedFood = data
         } else {
           Toast(msg)
         }
         this.$refs.food.show()
-      } catch (err) {
-        myToast.clear()
-      }
+      } catch (err) {}
     },
     addFood (target) {
       this._drop(target)