Vollständiges Abfangen von AJAX-Fehlern in JavaScript

Das Promise, das von fetch zurückgegeben wird, wird nur dann mit einem Fehler abgeschlossen, wenn ein Netzwerkfehler aufgetreten ist. Wenn der Server jedoch eine Antwort mit dem Status 404 oder 500 zurückgibt, wird das Promise erfolgreich abgeschlossen, aber der Status ok wird auf false gesetzt.

Lassen Sie uns beide Fehlertypen abfangen:

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

Sorgen wir dafür, dass ein Fehler, der mit einem schlechten HTTP-Antwortstatus zusammenhängt, ebenfalls vom catch-Block abgefangen wird. Dazu werfen wir ihn weiter mit throw:

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

Geben Sie den Text der Seite aus, wenn die Anfrage erfolgreich war, und einen Fehler, wenn etwas schiefgelaufen ist.