js 服务器链接失败跳转错误页面处理

一般我们在处理请求服务的时候不免会遇到服务器连接不上的情况，而现在开发网站应用一般读书采用路由的方式，也非html静态文件开发，列入使用vue脚手架开发网站应用的时候，我们会将对请求服务器的操作进行封装到一个单独的文件，会用一个总的post或者get等方法。当我们请求服务端的时候如果返回的是服务器连接失败的情况想用路由跳转的指定的提示页面却发现就会出现两个Vue事例，这样跳转就没有意义的，完全无效的。我们可以使用window对象本身的href属性来伪装路由。

1.首先你得路由表中有指定的数据，我的是这样的，我将路由表单独提出来了

export const routes = [
 ...
 //网络错误
  {
    path: '/net-break',
    name: 'net-break',
    component: resolve => require(['components/error/NetBreak'], resolve)
  }, 
 ...
]

2.在总的post或者get方法的js文件中封装一个处理网络错误的函数，先读去href，再重新包装成路由的href，这样页面不会因为改变了href的值而重新刷新页面

//前往网络错误页面
function go2netBreak() {
  let url = window.location.href;
  url = (url.split('#'))[0]+'#/net-break';
  window.location.href = url
}

3.在post或者get函数中使用

export class PostUtil {
   ...
   async Post(url, params) {
    url = this.host + url;
    return await new Promise((resolve, reject) => {
      Axios.post(url, JSON.stringify(params))
        .then(rs => {
          //console.log(rs);
          if (parseInt(rs.data.Code) === 200) {
            resolve({
              data: rs.data.Data || rs.data,
              code: rs.data.Code && parseInt(rs.data.Code) || 401,
              msg: rs.data.Msg || null,
              count: rs.data.Count || null
            })
          } else {
            reject(rs)
          }
        })
        .catch(rs => {
          let message = null;
          let code = rs && rs.status;
          if (code && code === 404) {
            message = '资源不存在'
          } else if (code === 500) {
            message = '服务器未知错误'
          } else if (code === 401) {
            message = '当前请求需要用户验证'
          } else {
            message = '服务器链接崩溃了～';
            this.netErrCount += 1;
            ReqErrCount++;
            go2netBreak();    //这里使用
          }
        })
    })
  }
  ...
}

效果如下

地址

页面