Полный перехват AJAX ошибок в JavaScript

Промис, который возвращает fetch, завершается с ошибкой, только если произошла ошибка сети. Если же сервер вернул ответ со статусом 404 или 500, то промис будет завершен успешно, но при этом статус ok будет установлен в false.

Давайте перехватим оба типа ошибок:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('плохой статус ответа');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Сделаем так, чтобы ошибка, связанная с плохим статусом HTTP ответа, также ловилась блоком catch. Для этого прокинем ее дальше через throw:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('плохой статус ответа');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Выведите текст страницы, если запрос был успешным, и ошибку, если что-то пошло не так.