Interceptação Completa de Erros AJAX em JavaScript

A Promise retornada por fetch é rejeitada apenas se ocorrer um erro de rede. Se o servidor retornar uma resposta com status 404 ou 500, a Promise será cumprida (resolvida), mas o status ok será definido como false.

Vamos interceptar ambos os tipos de erro:

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

Vamos fazer com que o erro relacionado ao status HTTP ruim também seja capturado pelo bloco catch. Para isso, vamos propagá-lo (rejeitar) usando throw:

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

Exiba o texto da página se a requisição foi bem-sucedida, e o erro se algo deu errado.