同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96
在某些情况下，我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后，我们需要执行一些代码。
naviagtor.onLine
naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。
navigator.onLine caniuse figures
而在比较老的 IE8 浏览器，我们小使用 online 事件进行监听。
document.addEventListenner(‘online’, () => {
// todo
});
document.addEventListenner(‘offline’, () => {
// todo
})
网络心跳检测
然后很早的时候，很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。
const pingUrl = ‘https://ipv4.icanhazip.com';
fetch(`${pingUrl}?_t=` + parseInt(Math.random() * 10000)).then((result) => {
// todo online
}).catch((err) => {
// console.log(err);
if (err.message.indexOf(‘Failed to fetch’) !== -1 ) {
// todo offline
}
})
这种方案至今可以用在不支持上面的特性或者你的代码运行在 Node.js 环境中使用。
navigator.connection
And navigator.connection help us get some basic connection information like speed or other metrics.
而随着浏览器的不断升级，新的 API navigator.connection 让开发者可以知道更多的链接信息，比如当前速度的快慢。
const networkType = navigator.connection.effectiveType
// return ‘3g’, ‘4g’, ‘2g’
这是非常不错的功能， 但是 😿 目前只有 Chrome 可以访问到。
navigator.connection caniuse figure
不过，我们依旧可以尝试别的方法。我们可以通过 《预估网速》 来判断当前网络速度大致快慢。
const start = Date.now();
fetch(url, {}).then((result) => {
const end = Date.now();
const bw = length / (end — start) * 8000;
// check the bw
})
Network-heart-service
因此自己总结了一下，发布了一个第三方模块 (network-heart-service)，用于处理网络变化的情况。你可以使用它来处理网络断开或者判断当前网络的状况。
简单看下如何使用它。
$ npm install network-heart-service -save
// es6
import NetworkHeartService from 'network-heart-service';
this.networkHeartService = new NetworkHeartService({
heartMode: 'auto',
reconnect() {
console.log(‘TODO …’)
}
});
this.networkHeartService.start();
基本的 Config。
-
heartMode { number } 2000
用于确定心跳模式，默认为步长递增，如果指定为具体的数字的话，则会进行等时长轮询。 -
lowSpeedNetwork { function }
当网速变慢时的回调
-
reconnect { function }
当网络重新建立连接时候的回调
-
offline { function }
当网络离线时候的回调。
API
-
isOnline()判断当前网络是否连接。
const isOnline = await NetworkHeartService.isOnline(); // true or false -
start()以及stop()启动或者暂停心跳服务。
希望它可以帮到你，也欢迎大家提 issues 。