การดักจับข้อผิดพลาด AJAX แบบสมบูรณ์ใน JavaScript

Promise ที่ส่งคืนโดย fetch จะสำเร็จด้วยข้อผิดพลาดก็ต่อเมื่อเกิด ข้อผิดพลาดเครือข่ายเท่านั้น หากเซิร์ฟเวอร์ส่งกลับการตอบสนอง ที่มีสถานะ 404 หรือ 500 Promise จะสำเร็จด้วยผลลัพธ์ แต่สถานะ ok จะ ถูกตั้งค่าเป็น false

เรามาดักจับข้อผิดพลาดทั้งสองประเภท:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('สถานะการตอบสนองไม่ดี');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

มาทำให้ข้อผิดพลาดที่เกี่ยวข้อง กับสถานะ HTTP ที่ไม่ดี สามารถ ถูกดักจับโดยบล็อก catch ได้ โดยการส่งต่อมันไป ผ่าน throw:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('สถานะการตอบสนองไม่ดี');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

ให้แสดงข้อความของหน้าถ้าคำขอ สำเร็จ และแสดงข้อผิดพลาดถ้า มีบางอย่างผิดพลาด