Пълен прихващане на 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);
		}
	);
});

Изведете текста на страницата, ако заявката е била успешна, и грешката, ако нещо се е объркало.