Intercepción completa de errores AJAX en JavaScript

La promesa que devuelve fetch se rechaza solo si ocurre un error de red. Sin embargo, si el servidor devuelve una respuesta con estado 404 o 500, la promesa se resolverá correctamente, pero el estado ok será establecido en false.

Interceptemos ambos tipos de errores:

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

Hagamos que el error relacionado con un mal estado de respuesta HTTP también sea capturado por el bloque catch. Para ello, lo lanzaremos más adelante usando throw:

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

Muestre el texto de la página si la solicitud fue exitosa, y un error si algo salió mal.