Teljes AJAX hibakezelés JavaScriptben

A fetch által visszaadott Promise csak akkor végződik hibával, ha hálózati hiba történt. Ha viszont a szerver 404 vagy 500 állapotkóddal válaszol, a Promise sikeresen lefut, de az ok állapot false értékre lesz állítva.

Fogjuk meg mindkét típusú hibát:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('hibás válasz állapotkód');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Tegyük úgy, hogy a HTTP válasz hibás állapotkódjával kapcsolatos hiba is el legyen kapva a catch blokk által. Ehgy dobjuk tovább a hibát a throw segítségével:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('hibás válasz állapotkód');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Jelenítse meg az oldal szövegét, ha a kérés sikeres volt, és a hibát, ha valami elromlott.