Fullständig avlyssning av AJAX-fel i JavaScript

Ett löfte som returneras av fetch, avslutas endast med ett fel om ett nätverksfel uppstod. Om servern däremot returnerade ett svar med status 404 eller 500, kommer löftet att uppfyllas, men status ok kommer att vara satt till false.

Låt oss fånga båda typer av fel:

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

Låt oss se till att fel relaterade till dålig HTTP-status i svaret också fångas av catch-blocket. För att göra detta kastar vi felet vidare via throw:

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

Visa sidans text om förfrågan var framgångsrik, och ett fel om något gick fel.