断网情况下,前端页面处理

时间:2024-01-24 09:55:41

断网页面处理其实很多时候都会被忽略,其实这个做起来还是可以学到不少东西的。

主要有两种方法:

一、使用vuex+axios拦截器

这种方法我只讲下思路:

在vuex里存储一个全局变量,先设置为true,再在request,js里的axios拦截器里改变它的值,当没有网络时,就设置为false,使用vuex的store.commit来更新。

然后在用app.vue,使用这个变量,使用v-if来决定提示用户连接网络的图片要不要出现。

其实这种方法不是很好,因为vuex被大材小用了,而且,app.vue就该什么都没有。当然,如果实在想用这种方法,那可以新建一个networkError.vue文件,当断网时就跳进这个页面。

 

二、使用navigator.online判断

这个方法比上面那个要友好一些,核心代码就这些

// 路由里面的代码  
{
    path: \'/networkError\',
    component: require(\'@/views/index/networkError.vue\').default, 
    name: \'网络异常\',
    meta: { title: \'网络异常\' } 
},

 

  这里不要用路由懒加载,因为会动态加载,注意咱们现在是断网,直接用request

判断是否断网,断网的话,就跳转到networkError,提示用户检查网络。

 window.addEventListener(\'offline\', () => {
      if (!navigator.onLine) {
        router.push(\'/networkError\');
      }
    });

这个代码是写在路由里面的。此外不要用location进行跳转,因为会引起刷新。

 

其实第二种方法还是有弊端的,因为,还存在这种情况,用户连上wifi了,但是wifi没有网络。

个人认为比较保险的方法还是在每个页面都进行判断,有拿到数据就认为有网,没有就是断网。

 

相关文章