Full avlytting av AJAX-feil i JavaScript

Promise som returneres av fetch, fullføres kun med en feil hvis det oppstod en nettverksfeil. Hvis serveren returnerte et svar med status 404 eller 500, vil promise bli fullført vellykket, men status ok vil da være satt til false.

La oss avlytte begge feiltypene:

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);
		}
	);
});

La oss sørge for at feil relatert til dårlig HTTP-svarsstatus også blir fanget opp av catch-blokken. For å gjø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);
		}
	);
});

Skriv ut sideteksten hvis forespørselen var vellykket, og feilmeldingen hvis noe gikk galt.