vue 请求拦截 接口报错 自动跳转到503提示页面

做项目的时候，有时候接口报错，或者服务器挂了，我们需要做一个错误页面，告诉用户此时服务器挂了。在网上找了一下，并没有清晰易懂的文档，我就把我的项目里面用到的分享出来。

新建一个请求拦截js文件，代码如下：

import axios from 'axios'
import router from '../router.js'

// 创建 axios 实例
export const Axios = axios.create({
  timeout: 15000
})

window.cancelInterface = []
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
axios.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      if (!window.cancelInterface) {
        window.cancelInterface = []
      }
      window.cancelInterface.push({
        cancel
      })
    })
    // console.log('config.token', config)
    if (config.token != 'none') {
      if (localStorage.token) {
        config.headers.Authorization = 'Bearer ' + localStorage.token
      }
    }

    return config
  },
  error => { 
    return Promise.reject(error)
  }
)

//返回状态判断(添加响应拦截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(
  res => {
    if (res.data.code == '401') {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    //503跳转到错误页
    if (res.data.code == '503') {
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
      return
    }
    return res
  },
  error => {
    if (error.response.status === 401 || error.response.status === 403) {
      router.push({
        path: '/login',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 503 ) {
      router.push({
        path: '/error',
        query: {
          redirect: location.hostname
        }
      })
    } else if (error.response.status === 500) {
      // 服务器错误
      return Promise.reject(error.response.data)
    } 
    // 返回 response 里的错误信息
    return Promise.reject(error.response.data)
  }
)
// 将 Axios 实例添加到Vue的原型对象上
export default {
  install(Vue) {
    Object.defineProperty(Vue.prototype, '$http', {
      value: Axios
    })
  }
}

如此，大功告成