Kompletní zachycení AJAX chyb v JavaScriptu

Promise, který vrací fetch, je dokončen s chybou pouze tehdy, pokud nastala chyba sítě. Pokud server vrátí odpověď se statusem 404 nebo 500, tak bude promise úspěšně dokončen, ale status ok bude nastaven na false.

Pojďme zachytit oba typy chyb:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('špatný status odpovědi');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Uděláme to tak, aby chyba, spojená se špatným statusem HTTP odpovědi, byla také zachycena blokem catch. K tomu ji pošleme dál pomocí throw:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('špatný status odpovědi');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Vypište text stránky, pokud byl požadavek úspěšný, a chybu, pokud se něco pokazilo.