你是否遇到过断网检测的需求？
你也碰到断网检测的需求啦？
一般的断网检测需求，大部分都是在用户网络状态不好或者网络掉线时，我们给用户一个提示或者引导界面，防止用户不知道自己卡了在那里一直等待。
方案1，轮询请求
直接说最有效的方案，我们通过轮训请求来检测网络是否可用，比如加载图片或者访问接口等...
下面我以加载图片为例，搞个小demo：
- 首先尽可能的找一个小的图片，不要让图片的请求堵塞我们的其他功能使用。
推荐一个图片在线的压缩的网站: https://www.yalijuda.com/ ，然后把图片上到内部的服务器上
- 既然搞了，就搞个通用的，使用
tsup我们搞个npm包，然后想一想我们要搞的功能，先把入口函数的出入参类型定了。我们既然要做轮训请求图片，我们首先需要一个图片地址，然后请求后的回调事件，甚至可能需要一些控制参数，那我们的入口代码也就有了。const request = (imgUrl) => {
// do something
};
type CheckNetworkOptionsType = {
interval: number; // 循环时间 单位ms
};
type CheckNetworkType = (
imgUrl: string, // 图片url
callback: (isOnline: boolean) => void, // 回调，返回网络是否在线
options?: CheckNetworkOptionsType, // 配置项
) => void;
const checkNetwork: CheckNetworkType = (imgUrl, callback, options) => {
const { interval = 30_000 } = options || {};
const timer = setInterval(() => {
request(imgUrl)
}, interval);
return timer
};
export default checkNetwork - 接下来我们要考虑一下如何进行请求，我们需要一个创一个
promise和img标签，resove出去onload和onerror对应的在线和离线状态。const request = (imgUrl) => {
return new Promise((resolve) => {
let imgRef = null;
let isRespond = false;
imgRef = document.createElement('img');
imgRef.onerror = () => {
isRespond = true;
resolve(false);
return '';
};
imgRef.onload = () => {
isRespond = true;
resolve(true);
return '';
};
imgRef.src = `${imgUrl}?time=${new Date().toLocaleString()}`;
});
};
type CheckNetworkOptionsType = {
interval: number; // 循环时间 单位ms
};
type CheckNetworkType = (
imgUrl: string, // 图片url
callback: (isOnline: boolean) => void, // 回调，返回网络是否在线
options?: CheckNetworkOptionsType, // 配置项
) => void;
const checkNetwork: CheckNetworkType = (imgUrl, callback, options) => {
const { interval = 30_000 } = options || {};
const timer = setInterval(async () => {
const status = (await request(imgUrl)) as boolean;
callback(status);
}, interval);
return timer
};
export default checkNetwork - 这样基本的功能似乎就差不多了，但是感觉好像少点什么？比如服务器就是返回图片资源慢？那我们是不是可以加个超时时间？又或者是不是可以可以让用户手动取消循环？
const request = (imgUrl) => {
return new Promise((resolve) => {
let imgRef = null;
let isRespond = false;
imgRef = document.createElement('img');
imgRef.onerror = () => {
isRespond = true;
resolve(false);
return '';
};
imgRef.onload = () => {
isRespond = true;
resolve(true);
return '';
};
// 加个参数，防止浏览器缓存
imgRef.src = `${imgUrl}?time=${new Date().toLocaleString()}`;
});
};
type CheckNetworkOptionsType = {
interval: number; // 循环时间 单位ms
};
type CheckNetworkType = (
imgUrl: string, // 图片url
callback: (isOnline: boolean) => void, // 回调，返回网络是否在线
options?: CheckNetworkOptionsType, // 配置项
) => void;
const checkNetwork: CheckNetworkType = (imgUrl, callback, options) => {
const { interval = 30_000 } = options || {};
const timer = setInterval(async () => {
const status = (await request(imgUrl)) as boolean;
callback(status);
}, interval);
return timer
};
export default checkNetwork - 完整的代码就完整了，具体用的时间还是建议大家关键模块来进行断网检测。不要一个后台配置表单都弄检测，这种完全可以在提交表单的时候接口响应进行处理，断网检测一般都是用在需要实时监控之类的。不多说了，我们来体验下：
6. 没问题，一切ok，发个包，就叫network-watcher吧，欢迎大家star！
github.com/waltiu/netw…
方案2，直接调api
首先说下这种方案不推荐，其一浏览器兼容性有问题，其二只能检测到是否网络有连接，但是不能检测是否可用，这种实用性真的很差。
浏览器也提供了navigator.onLine 和 navigator.connection 可以直接查询网络状态，我们可以监听网络状态的变化。
window.addEventListener('online',function () {
alert("正常上网");
})
window.addEventListener('offline',function () {
alert('无网络');
})
这种实用性真的很差，用户网络连接但是没有网或者网很慢，实际上都会影响用户体验！！
用户的体验永远是NO.1
作者：Waltiu
来源：juejin.cn/post/7299671709476700212
来源：juejin.cn/post/7299671709476700212
