前端如何捕获网络问题导致的接口失败 net::ERR_NETWORK_IO_SUSPENDED

上传大文件时电脑休眠、页面静置导致接口报网络错误,上传失败

  • 最近遇到了上传文件遇到网络波动、超时、网络中断情况下需要重传的需求
  • 刚开始排查只能在控制台看到报错net::ERR_NETWORK_IO_SUSPENDED,一头雾水。
  • 后加上catch捕获异常进行判断
fetch('/upload',{file: file})
	.then(res=>{
		// 上传处理。。。
	})
	.catch(err=>{
		console.log(err) // 控制台打印的是Error: Network Error
		// 于是加入判断,但是一下代码不生效,因为err不等于字符串的Error: Network Error
		// 为什么log打印出来是Error: Network Error,因为执行log的时候会
		// 调用err对象的toString()方法,该方法执行返回的结果就是字符串Error: Network Error
		if(err === 'Error: Network Error'){
			// 网络问题,自动重传处理。。。不生效
		}
	})
  • 后面查了MDN关于Error对象的描述才知道,err是一个对象,它有name、message、stack三个属性可以查看错误信息的详情。
  • 调试的时候在上面代码的基础上加入以下代码。
console.error('错误的属性:', err.message)
console.error('错误的类型:', err.name)
console.error('错误的堆栈:', err.stack)
console.error('错误的原因:', err.case)
  • 控制台打印出了net::ERR_NETWORK_IO_SUSPENDED的错误信息
    在这里插入图片描述
  • 我就可以使用err.message进行判断,是网络错误就进行重传处理解决问题
fetch('/upload',{file: file})
	.then(res=>{
		// 上传处理。。。
	})
	.catch(err=>{
		console.error('错误的属性:', err.message)
		console.error('错误的类型:', err.name)
		console.error('错误的堆栈:', err.stack)
		console.error('错误的原因:', err.case)
		if(err.message === 'Network Error'){
			// 网络问题,自动重传处理
		}
	})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/291341.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp中uview组件库丰富的Slider 滑动选择器的使用方法

目录 #平台差异说明 #基本使用 #设置最大和最小值 #设置步进值 #禁用状态 #自定义按钮的内容和样式 #自定义滑动选择器整体的样式 #此页面源代码地址 #API #Props #Slider Events 该组件一般用于表单中,手动选择一个区间范围的场景。 说明 该组件在H5&…

如何制作可预约的上门维修服务小程序?

上门维修服务已经成为人们日常生活中不可或缺的一部分。为了满足这一需求,我们学习如何无经验自己制作上门维修服务小程序。 首先,打开乔拓云-门店系统的后台,可以看到有很多各行各业的模版。这些模版涵盖了各种行业,包括家电维修…

竞赛保研 基于机器视觉的行人口罩佩戴检测

简介 2020新冠爆发以来,疫情牵动着全国人民的心,一线医护工作者在最前线抗击疫情的同时,我们也可以看到很多科技行业和人工智能领域的从业者,也在贡献着他们的力量。近些天来,旷视、商汤、海康、百度都多家科技公司研…

Js的$如同 sed的 java的$0 指代matcher匹配到的内容的符号

Js的$&如同 sed的& java的$0 $& 可用于Js,Vscode,RJTextEd,editplus,notepad, 在 Vscode,RJTextEd,editplus,notepad,等的替换中, 启用正则, 就能使 $&生效, 比如 ($&)表示给匹配到的内容加上括号 $& 可用于Js的String的replace(和replaceAll( 的第二…

《软件方法(下)》8.2.4-8.2.5 类和属性的命名,审查类和属性(202401更新)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 8.2 建模步骤C-1 识别类和属性 8.2.4 类和属性的命名 8.2.4.2 关于DDD话语中的“通用语言” DDD(领域驱动设计)话语中有“通用语言(Ubiquitous L…

DBeaver配置达梦数据库连接

随着信创逐渐推广,达梦数据库也成为流行。下面展示如何使用dbeaver配置达梦数据库连接 1 驱动新建 菜单,数据库->驱动管理器 2 驱动信息填写 选择新建之后,弹出一个填写页面 需要填写的几个关键信息: 驱动名称:…

迈向更高质量的深度估计

题目: Towards High Quality Depoth Estimation 摘要 目前的深度估计从业人员大多follow the settings of specific backbone without thinking about why is that。本文将详细探索从数据(不同类型数据集加载、稳定性、预处理、数据生成)&a…

从工程和科学问题到实际解决方案——《Python应用数值方法——解决工程和科学问题》

内容简介 《Python应用数值方法——解决工程和科学问题》是为想要学习和应用数值方法来解决工程和科学问题的学生撰写的。书中提供了足够丰富的理论知识。如果读过本书的姊妹篇《工程与科学数值方法的MATLAB实现(第4版)》,就会发现过渡到Python程序是无缝的&#x…

PLC-RecorderV3通过复制粘贴,便捷地处理采集变量的技巧

如何快速、批量创建或者修改采集变量呢?从早期版本开始,PLC-Recorder就有了导入、导出的功能,可以通过.CSV格式进行批量操作。从V3版本开始,又增加了简单的复制粘贴功能来便捷地进行变量操作。下面描述一下操作过程: …

vue3 基础+进阶(三、项目篇:状态管理库、路由以及一些基本配置)

目录 第三章 状态管理库:Pinia 3.1 创建空Vue项目并安装Pinia 3.1.1 创建空Vue项目 3.1.2 安装Pinia以及持久化工具 3.2 使用pinia 3.1.1 使用案例 3.1.2 规范问题 3.1.3 简化:结构赋值 第四章 Vue3的Router路由理解(与vue2类比) …

威尔仕2023年的统计数据

威尔仕健身房更新了2023年的统计数据,大家可以猜一猜我是哪一个称号?虽然小伙伴们的健身时长各有不同,有时候在课程中我也会分享自己健身的案例,看似一个简单的增强环路,旁边会有很多的调节环路来限制增强环路的增长&a…

CMA认证和CNAS认可哪个更专业?如何获取CMA、CNAS软件测试报告?

企事业单位或个人在选择软件检测机构时,首先需要考虑的就是该检测机构有无资质认证,这将关系到获取的检测报告的专业性,那么检测行业的CMA认证和CNAS认可哪个更专业呢?软件企业又该如何获取CMA、CNAS软件测试报告? 一、CMA认证是什么?  …

电源管理芯片常见故障有哪些?如何处理这些故障?

电源管理芯片常见故障 电源管理芯片是电子设备的关键器件,负责电能的转换、配电、检测和其他电源管理。在使用过程中,电源芯片也会出现一些故障,常见的故障有: 1. 电源芯片损坏 长时间的使用可能会导致电源管理芯片损坏&#xff0…

Profinet转Modbus使设备互联更简单

在工业自动化领域,为了使设备互联更加简单,可以将Modbus和Profinet相互转换。这样一来,设备之间的互联就变得更加方便和高效。通过Modbus转Profinet网关(XD-MDPN100/200),设备之间的通信变得更加灵活和可靠…

斐讯N1盒子刷YYF固件如何清理内存,恢复出厂设置

斐讯N1盒子刷YYF固件,使用一段时间后内存不足。 这时候怎么有效清理内存? 1.不要使用系统自带的恢复出厂设置功能。这个恢复出厂设置后并不能清空内存。 2.使用yyf固件自己的恢复出厂设置功能。

线性代数-第五课,第六课,第七课,第八课

第五课 判断某向量是否可由某向量组线性表示 把向量组组成一个行列式,计算行列式的秩 把所有向量放在一起构成一个行列式,计算行列式的秩 如果两个行列式的秩相等,表示可以线性表示,写答案的格式如下 线性表示:bk…

SAFe大规模敏捷企业级实训

课程简介 SAFe – Scaled Agile Framework是目前全球运用最广泛的大规模敏捷框架,也是成长最快、最被认可、最有价值的规模化敏捷框架,目前全球SAFe认证专业人士已达80万人,福布斯100强的70%都在实施SAFe。本课程是一个2天的 SAFe权威培训课…

HarmonyOS 应用开发学习笔记 ets自定义组件及其引用 @Component自定义组件

Component注解的作用是用来构建自定义组件 Component组件官方文档 自定义组件具有以下特点: 可组合:允许开发者组合使用系统组件、及其属性和方法。 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器…

软文推广三大注意事项,媒介盒子分享

软文推广是目前许多企业进行品牌宣传的方式,但是大部分企业在做推广时因为事先不了解踩了不少坑,导致钱也花了人力也投入了,但是成果却不尽人意,今天媒介盒子就来和大家分享软文推广三大注意事项,帮助企业少走弯路&…

Docker实战03|Cgroups

在上一文《Docker实战02|Namespace》中主要介绍了Linux Namespace的基本原理以及实现。相信读完以后可以更加深入的了解Docker关于Namespace的底层实现原理了。 本文继续针对Cgroups技术展开讲解并利用Go语言进行实践。 本系列所有代码均已经开源。关公众号回复「…