前端判断网络状态并提示

在后台系统访问,有时候会遇到断网或者网络不好得时候,所以这里需求是在请求发送之前判断网络环境,如果断网给出提示,弱网超过一定时间提示请求超时

1、封装判断断网函数统一封装

这里使用得是window的一个属性navigator

复制代码
function checkConnectionStatus() {
  const networkType = window.navigator.onLine;
    if (!networkType) {
      // 网络速度慢,给出提示
      message({
        type: "error",
        message: "当前网络未连接,请检查网络!"
      });
      return false
    }
    return true
}
2、在请求封装的函数前先判断网络情况

如果断网直接提示,并不走请求逻辑

复制代码
/**
 * post方法,对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post(url, params, isLoading = true) {
  // 在发送请求之前判断网络状态
  const flag = checkConnectionStatus()
  if(!flag) return
  if (isLoading == true) {
    var loadingInstance = Loading.service({
      lock: true,
      text: "加载中...",
      background: "rgba(255, 255, 255, 0.3)"
    });
  }
  return new Promise((resolve, reject) => {
    Axios.post(url, QS.stringify(params))
      .then(res => {
        if (loadingInstance) {
          setTimeout(() => {
            loadingInstance.close();
          }, 0);
        }
        resolve(res.data);
      })
      .catch(err => {
        if (loadingInstance) {
          setTimeout(() => {
            loadingInstance.close();
          }, 0);
        }        
        reject(err.data);
      });
  });
}
3、弱网情况下提示请求超时

这里需要在响应拦截器中做判断

3.1、设定超时时间
复制代码
// 设置请求超时
Axios.defaults.timeout = 20000;
3.2、拦截器判断
复制代码
Axios.interceptors.response.use(
···
// 服务器状态码不是成功的情况
  error => {
    if (error.message.includes("timeout")) {
      message({
        type: "error",
        message: "网络连接超时,请检查网络"
      });
      return Promise.reject(error.response);
    } else if (error.response.status) {
        // 其他错误,直接抛出错误提示
        default:
          break;
      }
      return Promise.reject(error.response);
    }
  }
)

这样子就可以啦,是不是很容易!!!

相关推荐
edjxj18 小时前
Qt图片资源导入
开发语言·qt
qq_259297247318 小时前
QT-事件
开发语言·qt
我不只是切图仔18 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
专注VB编程开发20年18 小时前
CSS 的命名方式像是 PowerShell 的动词-名词结构,缺乏面向对象的层级关系
开发语言·后端·rust
古译汉书18 小时前
嵌入式铁头山羊stm32-ADC实现定时器触发的注入序列的单通道转换-Day26
开发语言·数据结构·stm32·单片机·嵌入式硬件·算法
星马梦缘18 小时前
计算机网络4 第四章 网络层——网络间的通信问题(省际之间如何规划信件运输路线)
网络·计算机网络·路由·ip地址·子网掩码·icmp·ipv4/ipv6
该用户已不存在18 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api18 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
计算机毕业设计木哥19 小时前
计算机毕设选题:基于Python+Django的B站数据分析系统的设计与实现【源码+文档+调试】
java·开发语言·后端·python·spark·django·课程设计
陈陈爱java19 小时前
Spring八股文
开发语言·javascript·数据库