vue：实现连接超时和连接异常的界面提醒

发送请求的文件内

// response 拦截器

// 导入vue实例
import vueExample from '../main.js'

service.interceptors.response.use(
  response => {
    const code = response.status
    if (code < 200 || code > 300) {

      console.log(response.message)
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    let code = 0
    try {
      vueExample.$children[0]._data.timeoutShow = false
      vueExample.$children[0]._data.reasonShow = false
      code = error.response.data.status
    } catch (e) {
    做错误判断
      if (error.toString().indexOf('Error: timeout') !== -1) {

        vueExample.$children[0]._data.timeoutShow = true
        console.log('网络请求超时')
        return Promise.reject(error)
      }
      if (error.toString().indexOf('Error: Network Error') !== -1) {
        console.dir(vueExample)
        vueExample.$children[0]._data.reasonShow = true
        // console.log()
        console.log('网络请求错误')
        return Promise.reject(error)
      }
    }
    if (code === 401) {
      console.log('登录状态已过期，您可以继续留在该页面，或者重新登录')
    } else if (code === 403) {
      router.push({ path: '/401' })
    } else {
      const errorMsg = error.response.data.message
      if (errorMsg !== undefined) {
        console.log(errorMsg)
      }
    }
    return Promise.reject(error)
  }
)

main.js导出实例

export default vue