Intercettazione completa degli errori AJAX in JavaScript

La Promise restituita da fetch si risolve con un errore solo se si verifica un errore di rete. Se invece il server restituisce una risposta con status 404 o 500, la Promise verrà risolta con successo, ma la proprietà ok sarà impostata a false.

Intercettiamo entrambi i tipi di errore:

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

Facciamo in modo che anche l'errore relativo a uno status HTTP non valido venga catturato dal blocco catch. Per farlo, lo rigettiamo usando throw:

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

Visualizza il testo della pagina se la richiesta è andata a buon fine, e l'errore se qualcosa è andato storto.