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

文章讲述了在上传大文件时遇到网络问题导致接口报错,通过捕获fetch的异常并分析Error对象的message、name和stack属性,成功识别出网络错误并实现自动重传的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

  • 最近遇到了上传文件遇到网络波动、超时、网络中断情况下需要重传的需求
  • 刚开始排查只能在控制台看到报错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'){
			// 网络问题,自动重传处理
		}
	})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vgbire

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值