Komplet afbrydelse af AJAX fejl i JavaScript

Promise'et, som fetch returnerer, fuldføres kun med en fejl, hvis der opstod en netværksfejl. Hvis serveren returnerede et svar med status 404 eller 500, så vil promise'et blive fuldført succesfuldt, men status ok vil være sat til false.

Lad os fange begge typer af fejl:

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

Lad os sørge for, at fejl relateret til dårlig HTTP svarsstatus også bliver fanget af catch blokken. For at gøre dette, kaster vi den videre via throw:

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

Vis sidens tekst, hvis anmodningen var succesfuld, og en fejl, hvis der gik noget galt.