JS async await fetch 捕获后端500错误详细信息

客户端异步请求抛出的500友好错误信息,处理起来很困难,需要把后端代码逐个检查下。

若是抛出500错误详细信息,就可以快速把问题处理掉。

如果是响应的是文本,就用 response.text() 方法,JSON 就用 response.json() 方法。

javascript 复制代码
async function bigFileUpload_click(sef) {
	const chunk_size = 1024*1024; // 1MB per chunk
	const file = sef.files[0];
	const fileSize = file.size;
	const totalChunks = Math.ceil(fileSize/chunk_size); // 向上取整
	const progressBar = $$('#progressBar');
	
	console.log(  file.name );return;
	
	for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
		const start = chunkIndex * chunk_size;
		const end = Math.min(fileSize, start+chunk_size);
		const chunk = file.slice(start, end);
		const formData = new FormData();
		formData.append('act', 'bigFileUpload_click');
		formData.append('file', chunk);
		formData.append('fileName', file.name);
		formData.append('chunkIndex', chunkIndex);
		formData.append('totalChunks', totalChunks);
		
		progressBar.innerHTML = Math.ceil(chunkIndex/fileSize*100);
 
		await fetch(location.pathname,{
			method: 'POST',
			body: formData
		})
			.then(response => {
				if (response.status !== 200) {
					console.log('response:', response, response.text());
				}
			})
			.catch(error => {
				console.error('Error:', error)
			});
		;
	}
	
	progressBar.innerHTML = '100%';
}
相关推荐
*.✧屠苏隐遥(ノ◕ヮ◕)ノ*.✧5 分钟前
C语言_数据结构总结7:顺序队列(循环队列)
c语言·开发语言·数据结构·算法·visualstudio·visual studio
LIUJH12337 分钟前
数据结构——单调栈
开发语言·数据结构·c++·算法
A死灵圣法师9 分钟前
同一个接口,掉n次,取消上次请求
前端
前端涂涂13 分钟前
JavaScript面试宝典
前端·javascript
卖报的小行家_18 分钟前
读《Vue.js设计与实现》第四章·响应系统的作用与实现
前端
七月丶20 分钟前
🚀 前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?
前端
沉默王二20 分钟前
更快更强!字节满血版DeepSeek在IDEA中真的爽!
java·前端·程序员
掘金酱26 分钟前
👏 用idea传递无限可能!AI FOR CODE挑战赛「创意赛道」作品提交指南
前端·人工智能·trae
Hamm29 分钟前
咦,你的Git仓库贡献者里怎么有这么多大佬???
前端·git·github
潜龙在渊灬1 小时前
前端 UI 框架发展史
javascript·vue.js·react.js