JavaScript Fetch API: İstek, JSON ve Hata Yönetimi

Fetch Promise Tabanlı Bir HTTP İstemcisidir

fetch, tarayıcıların ve modern Node sürümlerinin içinde hazır gelir. Bir URL veriyorsun, sana Response nesnesine çözümlenen bir Promise döndürüyor. Aslında javascript fetch api'sinin özü de bundan ibaret:

İki ayrı .then çağrısı görmemizin sebebi, aslında iki farklı asenkron adımın olması: önce yanıt başlıkları (response headers) geliyor — ilk promise işte bununla resolve oluyor — ardından gövde (body) okunup parse ediliyor; çünkü response.json() da kendi başına bir promise döndürüyor. Yani gövde, siz istemedikçe indirilmiyor.

Aynı akışı async/await ile yazdığınızda, tıpkı sıradan yukarıdan aşağı bir kod gibi okunuyor:

İki await, iki askıya alma noktası. Aynı iş, ama okuma sırası çok daha net.

Response Nesnesi

Geri dönen şey aslında yanıt gövdesi değil — bir Response nesnesi. Bu nesne, yanıtla ilgili üst bilgileri ve gövdeyi farklı biçimlerde okumak için kullanabileceğin metotları barındırır:

Yanıt gövdesini .json(), .text(), .blob(), .arrayBuffer() veya .formData() ile okuyabilirsin. Her biri bir promise döndürür. Ayrıca gövdeyi yalnızca bir kez okuyabilirsin — aynı response üzerinde .json() metodunu iki kez çağırırsan ikinci çağrı hata fırlatır.

Dikkat: HTTP hataları reject etmez

Fetch API'ye yeni başlayan hemen herkesin takıldığı nokta burası. 404 veya 500 dönen bir yanıt reject sayılmaz. Promise normal şekilde resolve olur, sadece response.ok === false olur. Fetch yalnızca isteğin kendisi tamamlanamadığında reject eder — DNS hatası, bağlantı yokluğu, CORS engeli gibi durumlarda.

Yani naif bir fetch sana gönül rahatlığıyla bir hata sayfası teslim eder, sonra da .json() aşamasında patlar:

Bunu aşmak için response.ok kontrolünü elle yapıp, sunucu hata dönerse kendin bir throw atman gerekiyor:

if (!response.ok) kontrolünü yazmaya alışın. Yazacağınız her fetch sarmalayıcısında bu blok mutlaka yer almalı.

POST isteği gönderme

Fetch varsayılan olarak GET metodunu kullanır. Başka bir HTTP metodu kullanacaksanız, ikinci parametre olarak bir seçenekler nesnesi geçmeniz gerekir:

Dikkat edilmesi gereken üç nokta var:

• method varsayılan olarak "GET"'tir. POST, PUT, DELETE, PATCH kullanacaksan açıkça belirtmen gerekir.
• body bir string (ya da FormData, Blob vb.) alır — fetch senin yerine nesneyi serileştirmez. JSON.stringify(...) senin sorumluluğunda.
• Content-Type header'ı, sunucuya gövdenin nasıl ayrıştırılacağını söyler. Bunu unutursan çoğu sunucu gövdeyi düz metin olarak işler.

Headers, query string ve diğer seçenekler

Header'lar basit bir nesne (ya da bir Headers örneği) olarak verilir. Query string'i ise genellikle URLSearchParams ile kendin oluşturursun:

URLSearchParams encoding işini senin yerine hallediyor — boşluklar, & işaretleri, unicode karakterler... Yani girdide kaçışlanması gereken karakterler olduğunda bozuk URL'lerle uğraşmak zorunda kalmıyorsun.

Gerçek projelerde sık karşılaşacağın başka seçenekler de var: çapraz kaynak (cross-origin) isteklerde cookie göndermek için credentials: "include", HTTP cache'ini atlamak için cache: "no-store", CORS davranışını kontrol etmek için mode: "cors" (genelde zaten varsayılan budur).

AbortController ile İsteği İptal Etme

Bazen isteği yarıda kesmek istersin — kullanıcı yeni bir arama yazdı ya da istek fazla uzadı. İşte tam bu noktada AbortController devreye giriyor:

controller.abort() çağrısı, fetch promise'inin name değeri "AbortError" olan bir DOMException ile reddedilmesine neden olur. finally bloğu ise zamanlayıcıyı temizler; böylece başarılı bir istekten sonra ortalıkta boş yere çalışan bir timer kalmaz.

Bu kalıp — fetch, zaman aşımı ve temizleme birlikte — aslında bir yardımcı fonksiyona sarılıp her yerde tekrar kullanılmaya değer.

Tekrar Kullanılabilir Bir Fetch Wrapper'ı

Hepsini bir araya getirdiğinde, tekrarlayan kodu tek seferde halleden küçük bir yardımcı elde edersin:

Başlıkları tek yerden değiştirirsin, hataları tek yerden yönetirsin, boş cevapları tek yerden ele alırsın. Ciddi her proje er ya da geç bu noktaya geliyor.

Sırada: Asenkron Kodda Hata Yönetimi

Fetch, asenkron hataların en sık karşımıza çıktığı yerlerden biri ve response.ok kontrolü bu işin sadece bir parçası. Sıradaki yazıda promise'ler ve async/await arasında hata yönetimini konuşacağız — hatalar nereye gidiyor, nasıl yakalanıyor ve sessizce gözden kaçmalarına yol açan tuzaklar neler.