你是否遇到过断网检测的需求?

你也碰到断网检测的需求啦?

一般的断网检测需求,大部分都是在用户网络状态不好或者网络掉线时,我们给用户一个提示或者引导界面,防止用户不知道自己卡了在那里一直等待。

方案1,轮询请求

直接说最有效的方案,我们通过轮训请求来检测网络是否可用,比如加载图片或者访问接口等...

下面我以加载图片为例,搞个小demo:

  1. 首先尽可能的找一个小的图片,不要让图片的请求堵塞我们的其他功能使用。

    推荐一个图片在线的压缩的网站: https://www.yalijuda.com/,然后把图片上到内部的服务器上

  2. 既然搞了,就搞个通用的,使用tsup我们搞个npm包,然后想一想我们要搞的功能,先把入口函数的出入参类型定了。我们既然要做轮训请求图片,我们首先需要一个图片地址,然后请求后的回调事件,甚至可能需要一些控制参数,那我们的入口代码也就有了。

    js 复制代码
    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
  3. 接下来我们要考虑一下如何进行请求,我们需要一个创一个promiseimg标签resove 出去 onloadonerror 对应的在线和离线状态。

    js 复制代码
    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
  4. 这样基本的功能似乎就差不多了,但是感觉好像少点什么?比如服务器就是返回图片资源慢?那我们是不是可以加个超时时间?又或者是不是可以可以让用户手动取消循环?

    js 复制代码
    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
  5. 完整的代码就完整了,具体用的时间还是建议大家关键模块来进行断网检测。不要一个后台配置表单都弄检测,这种完全可以在提交表单的时候接口响应进行处理,断网检测一般都是用在需要实时监控之类的。不多说了,我们来体验下:

6. 没问题,一切ok,发个包,就叫network-watcher吧,欢迎大家star!
github.com/waltiu/netw...

方案2,直接调api

首先说下这种方案不推荐,其一浏览器兼容性有问题,其二只能检测到是否网络有连接,但是不能检测是否可用,这种实用性真的很差。

浏览器也提供了navigator.onLinenavigator.connection 可以直接查询网络状态,我们可以监听网络状态的变化。

js 复制代码
    window.addEventListener('online',function () {
        alert("正常上网");
    })
    window.addEventListener('offline',function () {
        alert('无网络');
    })

这种实用性真的很差,用户网络连接但是没有网或者网很慢,实际上都会影响用户体验!!

用户的体验永远是NO.1

相关推荐
今天头发还在吗16 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
冷冷的菜哥17 小时前
react多文件分片上传——支持拖拽与进度展示
前端·react.js·typescript·多文件上传·分片上传
Kisang.1 天前
【HarmonyOS】窗口管理实战指南
前端·华为·typescript·harmonyos·鸿蒙
Dajiaonew2 天前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
敲敲敲敲暴你脑袋2 天前
用3Dmol.js展示3D分子结构
typescript·webgl·数据可视化
还是大剑师兰特2 天前
TypeScript 面试题及详细答案 100题 (11-20)-- 基础类型与类型操作
typescript·大剑师·typescript教程·typescript面试题
用户47949283569152 天前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
用户47949283569152 天前
还不知道'use strict'的作用?这篇文章给你讲清楚
前端·javascript·typescript
乐影3 天前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
柯南二号3 天前
【大前端】 TypeScript vs JavaScript:全面对比与实践指南
前端·javascript·typescript