AJAX-virheiden täydellinen sieppaus JavaScriptissä

Lupaus, jonka fetch palauttaa, valmistuu virheellä vain, jos verkkovirhe tapahtui. Jos palvelin palauttaa vastauksen statuksella 404 tai 500, lupaus valmistuu onnistuneesti, mutta tällöin tila ok on asetettu arvoon false.

Siepataanpa molemmat virhetyypit:

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

Tehdään niin, että HTTP-vastauksen huonoon statukseen liittyvä virhe myös saadaan kiinni catch -lohkossa. Tätä varten heitetään se eteenpäin käyttämällä throw:ia:

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

Tulosta sivun teksti, jos pyyntö onnistui, ja virhe, jos jokin meni pieleen.