在很多场景下,只有机器已经联网以后,web应用才能启动。如果没有联网,就会提示错误。、
但是机器有时候要重启。 如果机器重启后,立刻启动web应用的话,可能,机器上的网络服务还没有准备好。
方法一:
navigator.onLine (HTML5属性)
if (navigator.onLine) {
//正常工作
console.log('正常联网')
} else {
//执行离线状态时的任务
console.log('网络断开')
}
这个html5的 navigator的新特性可以很简单帮我们搞定
HTML5为此定义了一个navigator.onLine属性,这个属性值为true表示设备能上网,值为false表示设备离线。
方法二
用vue的方法:
1.新建refresh.vue断网页面,当断网时,我们跳转到这个页面。
2.监听接口,在vuex中新建一个networkSuccess参数,断网为false,联网为true。
3.根据networkSuccess来判定跳不跳转到refresh.vue页面。
1.vuex store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
networkSuccess: true //是否断网
},
mutations: {
changeNetworkSuccess(state,val){ //改变状态
state.networkSuccess = val
}
},
actions: {
}
})
2.断网页面-refresh.vue
<template>
<div class="refresh" v-if="!networkSuccess">
<h3>我断网了</h3>
<button @click="onRefresh()">点我刷新</button>
</div>
</template>
<script>
import {mapState } from 'vuex';
export default {
name: '',
data() {
return {}
},
methods: {
onRefresh(){
this.$router.go(-1)//返回之前点击的页面
},
},
computed:{
...mapState(['networkSuccess'])
},
}
</script>
3.利用axios的拦截器来判断是否断网
import axios from 'axios';
import router from '../router';
import store from '@/store';
// 响应拦截器
instance.interceptors.response.use(
// 请求成功 --->成功的时候把NetworkSuccess置为true
res => res.status === 200 ? Promise.resolve(res)&store.commit('changeNetworkSuccess', true) : Promise.reject(res),
// 请求失败
error => {
const { response } = error;
console.log(94,response)
if (response) {
// 请求已发出,但是不在2xx的范围 errorHandle为解析错误码
errorHandle(response.status, response.data.message);
return Promise.reject(response);
} else {
// 处理断网的情况
// eg:请求超时或断网时,更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据,会在断网组件中说明
store.commit('changeNetworkSuccess', false);
tip('网络异常!');
router.push({path:'refresh'})
}
});
/**
* 请求失败后的错误统一处理
* @param {Number} status 请求失败的状态码
*/
const errorHandle = (status, other) => {
// 状态码判断
switch (status) {
// 401: 未登录状态,跳转登录页
case 401:
toLogin();
break;
// 403 token过期
// 清除token并跳转登录页
case 403:
tip('登录过期,请重新登录');
localStorage.removeItem('token');
store.commit('loginSuccess', null);
setTimeout(() => {
toLogin();
}, 1000);
break;
// 404请求不存在
case 404:
tip('请求的资源不存在');
break;
/*case 500:
store.commit('changeNetworkSuccess', false);
tip('网络异常!');
router.push({path:'refresh'})*/
default:
console.log('其它错误',other);
}}
axios封装本人参考了vue中Axios的封装和API接口的管理