Pełne przechwytywanie błędów AJAX w JavaScript

Promise, który zwraca fetch, kończy się błędem tylko wtedy, gdy wystąpił błąd sieci. Jeśli serwer zwrócił odpowiedź ze statusem 404 lub 500, to promise zostanie zakończony pomyślnie, ale status ok będzie ustawiony na false.

Przechwyćmy oba typy błędów:

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

Sprawmy, aby błąd związany ze złym statusem odpowiedzi HTTP, również był łapany w bloku catch. W tym celu przerzućmy go dalej przez throw:

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

Wyświetl tekst strony, jeśli żądanie zakończyło się sukcesem, i błąd, jeśli coś poszło nie tak.