网络超时处理

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { getGlobalInterface } from '@/api/data.js'
 import { getUserInfo } from '@/api/user.js'
 // omega埋点工具包
@@ -13,13 +14,15 @@ const config = { appKey: 'omega6b172861f4' }
 
 export default {
   name: 'App',
+  computed: {
+    ...mapGetters(['noNetwork'])
+  },
   mounted() {
     window.addEventListener('offline', () => {
-      // 网络由正常常到异常时触发
-      this.$message({ message: '网络异常，请检查网络！', type: 'error', duration: 2000, offset: 150 })
+      this.$store.dispatch('global/setNoNetwork', true)// 处于断网状态
     })
     window.addEventListener('online', () => {
-      location.reload()
+      this.$store.dispatch('global/setNoNetwork', false)// 网络恢复
     })
     getUserInfo()
       .then(res => {

src/utils/request.js

@@ -10,66 +10,27 @@ import store from '@/store/index.js'
 // create an axios instance
 const service = axios.create({
   baseURL: '/apis', // url = base url + request url
-  // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000, // request timeout
   withCredentials: true
 })
 
-axios.defaults.withCredentials = true
-
-// request interceptor
 service.interceptors.request.use(
   config => {
-    // do something before request is sent
-
-    // if (store.getters.token) {
-    //   // let each request carry token
-    //   // ['X-Token'] is a custom headers key
-    //   // please modify it according to the actual situation
-    //   config.headers['X-Token'] = getToken()
-    // }
     config.headers['secret'] = Encrypt()
+    // config.retry = 2// 如果请求超时，重试次数
+    // config.retryInterval = 1000 // 重试间隔
     return config
   },
   error => {
-    // do something with request error
-    console.log(error) // for debug
     return Promise.reject(error)
   }
 )
-
-// response interceptor
 service.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-  */
-
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
   response => {
     const res = response.data
-    store.dispatch('global/setNoNetwork', false) // 网络状态恢复并成功返回结果
-    if (typeof res.code !== 'undefined' && res.code !== 200 && res.code !== 0) {
-      message({
-        message: res.msg || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
-    } else if (typeof res.retCode !== 'undefined' && res.retCode !== 0) {
-      message({
-        message: res.retMsg || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
-    }
     return res
   },
   error => {
-    console.log('err' + error) // for debug
     if (error && error.response) {
       switch (error.response.status) {
         case 400:
@@ -78,39 +39,14 @@ service.interceptors.response.use(
         case 401:
           error.message = '未授权，请重新登录'
           break
-        case 403:
-          error.message = '拒绝访问'
-          break
         case 404:
           error.message = '请求错误,未找到该资源'
           break
         case 405:
           error.message = '请求方法未允许'
           break
-        case 408:
-          error.message = '请求超时'
-          break
-        case 500:
-          error.message = '服务器端出错'
-          break
-        case 501:
-          error.message = '网络未实现'
-          break
-        case 502:
-          error.message = '网络错误'
-          break
-        case 503:
-          error.message = '服务不可用'
-          break
-        case 504:
-          error.message = '网络超时'
-          break
-        case 505:
-          error.message = 'http版本不支持该请求'
-          break
         default:
-          store.dispatch('global/setNoNetwork', true)// 无网络状态或者请求出错
-          error.message = `未知错误${error.response.status}`
+          error.message = `${error.response.status}`
       }
       if (error.response.status !== 403) {
         message({
@@ -126,16 +62,33 @@ service.interceptors.response.use(
         store.dispatch('global/setBizName', '')
         router.push({ name: 'notAccess' })
       }
-    } else {
-      error.message = '网络请求超时，请检查网络信息！'
-      message({
-        message: error.message,
-        type: 'warning',
-        duration: 5 * 1000
-      })
     }
     return Promise.reject(error)
   }
 )
+// function axiosRetryInterceptor(res) {
+//   const config = res.config
+//   // 无网络状态或者请求超时
+//   if (!config || !config.retry) return Promise.reject(res)
+//   // 记录重新请求的次数
+//   config.retryCount = config.retryCount || 0
+//   // 检查重新请求的次数是否超过我们设定的请求次数
+//   if (config.retryCount >= config.retry) {
+//     return Promise.reject(res)
+//   }
+//   // 重新请求的次数自增
+//   config.retryCount += 1
+//   // 创建新的Promise来处理重新请求的间隙
+//   const back = new Promise(function(resolve) {
+//     console.log('接口' + config.url + '请求超时，重新请求')
+//     setTimeout(function() {
+//       resolve()
+//     }, config.retryInterval || 500)
+//   })
+//   // 返回axios的实体，重试请求
+//   return back.then(function() {
+//     return service(config)
+//   })
+// }
 
 export default service

src/views/newLayout/layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="zhihui-contain">
-    <div v-show="!noNetwork" class="no-network" />
+    <div v-show="noNetwork" class="no-network" />
     <Head />
     <Aside />
     <Main />