JavaScript Fetch API Nedir? Sunucudan Veri Alma ve Gönderme
Modern web uygulamalarında verilerin yalnızca HTML dosyaları içerisinde bulunması yeterli değildir. Kullanıcı listeleri, ürün bilgileri, sipariş kayıtları ve uygulama ayarları çoğu zaman sunuculardan alınır. Kullanıcıların gerçekleştirdiği işlemler sonucunda yeni verilerin sunucuya gönderilmesi de gerekebilir.JavaScript Fetch API, tarayıcı üzerinden HTTP istekleri gerçekleştirmek için kullanılan modern bir arayüzdür. Fetch sayesinde bir web uygulaması sunucudan veri alabilir veya sunucuya veri gönderebilir.
Fetch API Nedir?
Fetch API, JavaScript ile ağ istekleri gerçekleştirmeyi sağlayan yerleşik bir tarayıcı özelliğidir.Bir web uygulaması Fetch kullanarak belirli bir URL adresine istek gönderebilir. Sunucu bu isteğe yanıt verdiğinde JavaScript yanıtı inceleyebilir ve uygun veri biçimine dönüştürebilir.
Fetch API özellikle REST tabanlı servislerle iletişim kurarken yaygın olarak kullanılır. JSON verilerinin alınması ve gönderilmesi bu kullanımın en bilinen örneklerindendir.
Fetch Nasıl Çalışır?
Fetch, kendisine verilen adres üzerinden bir HTTP isteği başlatır ve Promise döndürür.İstek tamamlandığında yanıt bilgisi elde edilir. Bu yanıtın durum kodu, başlıkları ve gövdesi incelenebilir.
Yanıtın gövdesi JSON, metin veya farklı veri biçimlerinde olabilir. Uygulamanın ihtiyacına göre uygun okuma yöntemi seçilir.
Fetch'in Promise döndürmesi, async await veya then zincirleriyle kullanılmasını sağlar.
GET İsteği Nedir?
GET, sunucudan veri almak için kullanılan HTTP yöntemidir.Örneğin bir e-ticaret sitesinin ürün listesini görüntülemesi, haber uygulamasının güncel içerikleri alması veya kullanıcı profilinin yüklenmesi GET isteğiyle gerçekleştirilebilir.
Fetch kullanıldığında varsayılan HTTP yöntemi GET'tir. Bu nedenle yalnızca bir adrese istek gönderilerek veri alınabilir.
GET istekleri genellikle sunucudaki bilgileri okumak amacıyla kullanılır. Sunucu tarafındaki tasarıma bağlı olarak sorgu parametreleri aracılığıyla belirli kayıtlar veya filtrelenmiş sonuçlar istenebilir.
POST İsteği Nedir?
POST, sunucuya yeni veri göndermek için kullanılan HTTP yöntemidir.Örneğin bir kullanıcının kayıt formunu göndermesi, yeni bir yorum oluşturması veya sipariş bilgilerini iletmesi POST isteğiyle gerçekleştirilebilir.
Fetch kullanılırken HTTP yöntemi POST olarak belirlenir ve gönderilecek veri isteğin gövdesine eklenir.
JSON gönderilen senaryolarda uygun Content-Type başlığı belirtilir. Verinin JavaScript nesnesinden JSON metnine dönüştürülmesi için JSON.stringify kullanılabilir.
PUT ve PATCH İstekleri
PUT ve PATCH, sunucudaki mevcut kaynakların güncellenmesi için kullanılan HTTP yöntemleridir.PUT genellikle bir kaynağın tamamının yeni bir temsil ile değiştirilmesi amacıyla kullanılır. PATCH ise kaynağın belirli alanlarının güncellenmesini ifade eder.
Örneğin bir kullanıcının profilindeki bütün bilgilerin yenilenmesi PUT ile, yalnızca profil fotoğrafı bilgisinin değiştirilmesi PATCH ile yönetilebilir.
Bu yöntemlerin gerçek davranışı API'nin tasarımına bağlıdır. Bu nedenle istek gönderilmeden önce ilgili servisin dokümantasyonu incelenmelidir.
DELETE İsteği
DELETE, sunucudaki bir kaynağın silinmesi amacıyla kullanılan HTTP yöntemidir.Örneğin bir kullanıcının oluşturduğu yorumu silmesi veya yönetim panelinden bir ürün kaydının kaldırılması bu yöntemle gerçekleştirilebilir.
Silme işlemleri veri kaybına neden olabileceği için uygulamanın yetkilendirme ve doğrulama kontrolleri dikkatli tasarlanmalıdır.
Fetch Yanıtını Okuma
Fetch tarafından döndürülen Response nesnesi, sunucudan gelen yanıt hakkında bilgi içerir.Yanıtın JSON biçiminde olması durumunda json metodu kullanılarak JavaScript değerine dönüştürülebilir. Metin biçimindeki yanıtlar için text metodu kullanılabilir.
Bu metotların kendileri de Promise döndürür. Dolayısıyla yanıt gövdesinin okunması için ayrıca bekleme işlemi yapılması gerekir.
Gelen veriler dönüştürüldükten sonra uygulamanın ihtiyaçlarına göre ekranda gösterilebilir veya başka işlemlerde kullanılabilir.
HTTP Durum Kodları
Sunucu, HTTP isteğine yanıt verirken durum kodu gönderir. Bu kodlar işlemin nasıl sonuçlandığı hakkında bilgi verir.200 kodu genellikle başarılı bir isteği ifade eder. 201, yeni bir kaynağın oluşturulduğunu gösterebilir. 400 istemci kaynaklı hataları, 401 kimlik doğrulama gereksinimini, 403 erişim izni bulunmadığını ve 404 istenen kaynağın bulunamadığını ifade edebilir.
500 serisi kodlar ise sunucu tarafındaki hataları temsil eder.
Önemli bir ayrıntı, Fetch'in 404 veya 500 gibi HTTP hata durumlarında her zaman Promise'i rejected durumuna geçirmemesidir. Bu nedenle yanıtın ok olup olmadığı ayrıca kontrol edilmelidir.
Fetch ile Hata Yönetimi
Fetch işlemlerinde ağ bağlantısının kesilmesi, isteğin engellenmesi veya farklı teknik sorunlar yaşanabilir.Bu tür durumlarda try catch veya Promise catch kullanılarak hata yönetimi gerçekleştirilebilir.
Bunun yanında HTTP durum kodları da kontrol edilmelidir. Çünkü başarılı şekilde alınmış bir HTTP yanıtı, istenen işlemin mutlaka başarılı olduğu anlamına gelmez.
Kullanıcıya uygun hata mesajı gösterilmesi ve gerektiğinde yeniden deneme seçeneği sunulması önemlidir.
CORS Nedir?
CORS, Cross-Origin Resource Sharing ifadesinin kısaltmasıdır. Farklı kaynaklar arasında tarayıcı üzerinden gerçekleştirilen isteklere hangi koşullarda izin verileceğini belirleyen güvenlik mekanizmasıdır.Bir web uygulaması kendi alan adı dışındaki bir sunucuya istek gönderdiğinde tarayıcı CORS kurallarını kontrol edebilir.
Sunucunun uygun izin başlıklarını göndermemesi durumunda tarayıcı yanıtın JavaScript tarafından kullanılmasını engelleyebilir.
CORS sorunu genellikle yalnızca istemci tarafında değişiklik yapılarak çözülemez. İzinlerin sunucu tarafında doğru yapılandırılması gerekir.
Fetch API ve Güvenlik
Fetch ile gönderilen verilerde hassas bilgiler bulunabilir. Bu nedenle HTTPS kullanılması, sunucu tarafında doğrulama yapılması ve uygun yetkilendirme mekanizmalarının uygulanması önemlidir.Ayrıca kullanıcıdan gelen veriler güvenilir kabul edilmemeli ve sunucu tarafında kontrol edilmelidir.
Kimlik doğrulama bilgileri gönderilirken kullanılan yöntemin güvenliği dikkatle değerlendirilmelidir. CORS ayarları da gereğinden fazla geniş tutulmamalıdır.
Fetch API Nerelerde Kullanılır?
Fetch API; kullanıcı bilgilerini yükleme, ürün listelerini getirme, form verilerini gönderme, yorum oluşturma ve farklı web servisleriyle iletişim kurma gibi işlemlerde kullanılır.Modern JavaScript projelerinde Fetch API'yi öğrenmek, sunucu tarafındaki verilerle çalışan uygulamalar geliştirmek açısından temel becerilerden biridir. Promise ve async await bilgisiyle birlikte kullanıldığında daha düzenli ağ iletişimi süreçleri oluşturulabilir.
