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%';
}
相关推荐
白宇横流学长1 小时前
基于Java的银行排号系统的设计与实现【源码+文档+部署讲解】
java·开发语言·数据库
大鱼前端1 小时前
2025年,AI时代下的前端职业思考
前端
勉灬之1 小时前
封装上传组件,提供各种校验、显示预览、排序等功能
开发语言·前端·javascript
outstanding木槿3 小时前
react中实现拖拽排序
前端·javascript·react.js
ordinary903 小时前
vue.js scoped样式冲突
前端·vue.js
西猫雷婶3 小时前
python学opencv|读取图像(二十三)使用cv2.putText()绘制文字
开发语言·python·opencv
我要学编程(ಥ_ಥ)4 小时前
速通前端篇——JavaScript
开发语言·前端·javascript
大强的博客4 小时前
《Vue3实战教程》19:Vue3组件 v-model
前端·javascript·vue.js
HEU_firejef5 小时前
设计模式——工厂模式
java·开发语言·设计模式
云计算DevOps-韩老师5 小时前
【网络云SRE运维开发】2024第52周-每日【2024/12/31】小测-计算机网络参考模型和通信协议的理论和实操考题
开发语言·网络·计算机网络·云计算·运维开发