【业务组件】占位图片页面，适用于移动端

背景

由于在移动端，很多时候存在断网，弱网的访问情况，在这种情况下，接口无返回，页面无法直接刷新。此时就需要当这种情况下，展示统一的占位图片页面以及刷新操作。

效果

代码实现

组件html代码部分

<div
    :style="{
      height:'100vh',
      padding: '0px 0 0',
      boxSizing: 'border-box',
      background: '#fff;',
    }"
    v-show="disconnect"
  >
    <!-- 无网络 -->
    <div v-show="disconnect == 'noConnected'" class="disconnect">
      <div class="content">
        <van-image
          :src="require('@/assets/image/default_img_nointernet.png')"
        />
        <div>网络未开启，请检查网络设置</div>
        <div class="btn" @click="refresh">重新加载</div>
      </div>
    </div>
    <!-- 接口异常时的占位图和提示语 -->
    <div v-show="disconnect === 'timeout'" class="disconnect">
      <div class="content">
        <van-image :src="require('@/assets/image/default_img_requestAborted.png')"
          mode="aspectFit"
        />
        <div>请求失败,请重试</div>
        <div class="btn" @click="refresh">重新加载</div>
      </div>
    </div>
  </div>

script代码

computed: {
    disconnect() {
      return this.$store.state.app.disconnect
    }
  },
  mounted() {
    // 监听网络
    // 网络由异常到正常时触发
    window.addEventListener('online', this.updateOnlineStatus)
    // 网络由正常到异常触发
    window.addEventListener('offline', this.updateOfflineStatus)
  },
  beforeDestroy() {
    window.removeEventListener('online', this.updateOnlineStatus)
    window.removeEventListener('offline', this.updateOfflineStatus)
  },
  methods: {
    updateOnlineStatus() {
      this.$store.commit('app/SET_DISCONNECT', false)
      this.refresh()
    },
    updateOfflineStatus() {
      this.$store.commit('app/SET_DISCONNECT', 'noConnected')
    },
    refresh() {
      this.$emit('refresh')
    }
  }

vuex代码

const mutations = {
  SET_DISCONNECT(state, disconnect) {
    state.disconnect = disconnect
  }
}

拦截器代码

// respone拦截器

service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    store.commit('app/SET_DISCONNECT', false)
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    if (error == 'Error: Network Error') {
      store.commit('app/SET_DISCONNECT', "noConnected")
    }
    Toast.clear()
    console.log('错误信息' + error) // for debug
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 504:
          Toast({ message: '网络错误,请联系管理员！', type: 'error' })
          break
        case 404:
          Toast({ message: '系统繁忙，稍后重试！', type: 'error' })
          break
        default:
          // Toast({ message: '系统异常，稍后重试', type: 'error' })
          break
      }
    } else if (!JSON.parse(sessionStorage.getItem('online'))) {
      Toast({ message: '网络无法连接，请检查网络', type: 'error' })
    } else if (JSON.stringify(error.message).includes("timeout")) {
      // 进入接口超时链接
      store.commit('app/SET_DISCONNECT', "timeout")
    }else {
      // Toast({ message: '系统异常，稍后重试', type: 'error' })
    }
    return Promise.reject(error)
  }
)
在接口超时响应时，传递超时参数。
当接口返回无网络时，传递无网络参数。

组件使用

直接引用组件
<disconnect @refresh="handleRequest" />
methods: {
    /**
     * @description  刷新之后的接口重新获取
     * */
     handleRequest() {
     // todo 
     },
}