Interception complète des erreurs AJAX en JavaScript

La promesse renvoyée par fetch n'échoue que si une erreur réseau est survenue. Si le serveur renvoie une réponse avec un statut 404 ou 500, alors la promesse sera résolue avec succès, mais le statut ok sera positionné à false.

Interceptons les deux types d'erreurs :

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

Faisons en sorte que l'erreur liée à un mauvais statut de réponse HTTP soit également attrapée par le bloc catch. Pour cela, propageons-la plus loin via throw :

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

Affichez le texte de la page si la requête a réussi, et l'erreur si quelque chose s'est mal passé.