修改断网时系统连续多个提示问题

src/utils/request.js

@@ -10,6 +10,8 @@ import { saveAs } from 'file-saver'
 let downloadLoadingInstance
 // 是否显示重新登录
 export let isRelogin = { show: false }
+// 是否已显示网络错误提示
+let isNetworkErrorShow = { show: false }
 
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
@@ -23,16 +25,37 @@ const service = axios.create({
   timeout: 30000
 })
 
+// 监听网络状态变化，网络恢复时重置标志
+window.addEventListener('online', () => {
+  isNetworkErrorShow.show = false
+})
+
 // request拦截器
 service.interceptors.request.use(config => {
   // 检查网络状态
   if (!navigator.onLine) {
-    Message({
-      message: '网络异常，请连接网络后再试',
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(new Error('网络异常，请连接网络后再试'))
+    // 如果还未显示网络错误提示，则显示一次
+    if (!isNetworkErrorShow.show) {
+      isNetworkErrorShow.show = true
+      Message({
+        message: '网络异常，请连接网络后再试',
+        type: 'error',
+        duration: 5 * 1000
+      })
+      // 5秒后重置标志，允许下次断网时再次提示
+      setTimeout(() => {
+        isNetworkErrorShow.show = false
+      }, 5000)
+    }
+    // 添加标识，表示已在请求拦截器中处理过网络错误
+    const error = new Error('网络异常，请连接网络后再试')
+    error.isNetworkOffline = true
+    return Promise.reject(error)
+  } else {
+    // 网络恢复时重置标志
+    if (isNetworkErrorShow.show) {
+      isNetworkErrorShow.show = false
+    }
   }
 
   // 是否需要设置 token
@@ -123,9 +146,27 @@ service.interceptors.response.use(res => {
   },
   error => {
     console.log('err' + error)
+    // 如果已经在请求拦截器中处理过网络断线错误，直接 reject，不再重复显示
+    if (error.isNetworkOffline) {
+      return Promise.reject(error)
+    }
     let { message } = error
     if (message == 'Network Error') {
       message = '网络异常，请连接网络后再试'
+      // 如果是网络错误，检查是否已显示过提示
+      if (!isNetworkErrorShow.show) {
+        isNetworkErrorShow.show = true
+        Message({
+          message: message,
+          type: 'error',
+          duration: 5 * 1000
+        })
+        // 5秒后重置标志
+        setTimeout(() => {
+          isNetworkErrorShow.show = false
+        }, 5000)
+      }
+      return Promise.reject(error)
     } else if (message.includes('timeout')) {
       message = '系统接口请求超时'
     } else if (message.includes('Request failed with status code')) {