JavaScript'te AJAX Hatalarını Tam Yakalama

fetch'in döndürdüğü Promise, sadece bir ağ hatası oluştuğunda hata ile sonuçlanır. Sunucu 404 veya 500 durum koduyla bir yanıt döndürdüyse, Promise başarıyla tamamlanır, ancak ok durumu false olarak ayarlanır.

Her iki hata türünü de yakalayalım:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				console.log('kötü yanıt durumu');
				return '';
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

Kötü HTTP yanıt durumuyla ilişkili hatanın da catch bloğu tarafından yakalanmasını sağlayalım. Bunun için, hatayı throw ile ileriye doğru fırlatalım:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html')
	.then(
		response => {
			if (response.ok) {
				return response.text();
			} else {
				throw new Error('kötü yanıt durumu');
			}
		},
	).then(
		text => {
			console.log(text);
		}
	).catch(
		error => {
			console.log(error);
		}
	);
});

İstek başarılı olduysa sayfanın metnini yazdırın, aksi takdirde bir hata yazdırın.