Volledige interceptie van AJAX-fouten in JavaScript

De promise die door fetch wordt geretourneerd, wordt alleen met een fout beëindigd als er een netwerkfout is opgetreden. Als de server echter een antwoord heeft geretourneerd met status 404 of 500, dan wordt de promise succesvol afgesloten, maar de status ok zal dan op false worden gezet.

Laten we beide soorten fouten onderscheppen:

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

Laten we ervoor zorgen dat de fout, gerelateerd aan een slechte HTTP-antwoordstatus, ook wordt opgevangen door het catch blok. Hiervoor gooien we deze verder via throw:

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

Toon de tekst van de pagina als het verzoek succesvol was, en een fout als er iets misging.