Penangkapan Kesalahan AJAX Lengkap di JavaScript

Promise yang dikembalikan oleh fetch hanya akan ditolak (reject) jika terjadi kesalahan jaringan. Jika server merespons dengan status 404 atau 500, maka promise akan diselesaikan dengan sukses (resolve), tetapi status ok akan diatur ke false.

Mari tangkap kedua jenis kesalahan:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('status respons buruk');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Mari kita atur agar kesalahan yang terkait dengan status HTTP respons yang buruk juga dapat ditangkap oleh blok catch. Untuk melakukannya, lempar (throw) kesalahan tersebut lebih lanjut menggunakan throw:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('status respons buruk');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Tampilkan teks halaman jika permintaan berhasil, dan tampilkan kesalahan jika ada masalah.