Tarayıcı ve frontend
Frontend’den API’ye: fetch, JSON ve durum
Bir veri isteğinin yükleniyor, başarılı, boş ve hatalı hallerini doğru göstermek.
Kavramı anlayalım
Tarayıcıda çalışan kod veri için fetch kullanır. fetch bir Promise döner ve ağ hatasında reddedilir, ama 404 veya 500 gibi HTTP hatalarında reddedilmez; response.ok değerini kontrol etmek senin işindir. Yanıt gövdesi akış olarak gelir ve response.json() ile ayrıştırılır.
Her veri isteğinin en az dört hali vardır: yükleniyor, başarılı, boş ve hata. Yalnız başarılı hali tasarlamak en yaygın eksikliktir. Yükleniyor hali, son içeriğin şekline benzeyen bir iskeletle gösterilebilir; hata hali kullanıcıya ne yapabileceğini (tekrar dene) söylemelidir.
Kullanıcı hızlı tıkladığında eski bir isteğin yanıtı yenisinden sonra gelebilir ve ekranı eski veriyle ezebilir. AbortController ile önceki istek iptal edilir. Bu sitenin blog arama kutusu ve sayfalama da bu yüzden önceki isteği iptal eder ve API hatasında eski sonuçları silmek yerine korur.
Ağ yavaş veya hatalıyken arayüzün nasıl davrandığı, kalitenin asıl göstergesidir.
fetch’in 500 yanıtında hata fırlatacağını sanmak ve response.ok kontrolünü atlamak.
Aynı konu. Üç farklı derinlik.
const res = await fetch("/api/blog?page=2");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();HTTP hatası fetch’i reddetmez; kontrol açıkça yapılır.
Bu sayfa gerçek bir sunucuya veya veritabanına bağlanmaz. Kod örnekleri .NET 8, Next.js ve SQL Server için temsilîdir; süreler simülasyondaki örnek değerlerdir, ölçüm değildir. Örnekleri yalnız kendi geliştirme ortamında dene; gerçek bağlantı dizesi, token veya parola paylaşma.
Önce kendin dene.
Arama kutusuna hızlıca ‘sq’ ve ardından ‘sql’ yazılıyor. ‘sq’ yanıtı daha geç geliyor ve ekranda yanlış sonuçlar kalıyor. Kodda neyi değiştirirsin?
Çözümü ve açıklamasını göster
Her yeni aramada önceki isteği AbortController ile iptal et
(veya yanıtı, istek anındaki sorguyla eşleşmiyorsa yok say).
İsteğe bağlı: 250 ms debounce.Yanıtların geliş sırası istek sırasıyla aynı değildir. Yalnız son isteğin sonucu ekrana yazılmalıdır.