前端如何捕获网络问题导致的接口失败 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'){
			// 网络问题，自动重传处理
		}
	})