Web API
Fetch API Pratikleri -1
Tarayıcı ile sunucu arasındaki iletişim yöntemlerinden en çok kullanılanı ve bilineni Http/s ’dir. İstek/Cevap (Request/Response) temeli üzerine kurulan bir protokoldür. Bugün bu iletişimi sağlayan WebAPI türlerinden Fetch API ile ilgili pratik yapacağız.
WebAPI kavramını bilmeyenler için ufak bir resim ile olayı özetliyeyim. Bizim yazdığımız JS kodları V8 Engine içerisinde işletilir. Ama bu engine sadece sadece JS işletmeyi gerçekleştirir. Bizim dosya sistemi, network, ekran kartı, ses kartı vb ile iletişimi sağlayacak bir takım C/C++ kütüphanelerindeki API ihtiyacımız varki işletim sistemindeki kaynaklara erişebilelim.
İşte bunu standart olarak bize WebAPI sağlıyor. Bu WebAPI’leride tarayıcılar (Chrome, Edge, Safari, Opera, Firefox) implement ediyor ve bizim JS kodları ile window objesi altından erişebilmemizi sağlıyor.
Fetch API’de bunlardan bir tanesi. Bu konuyu aslında HTTPRequest ve WebSocket yazısında detaylıca anlatmıştım.
Öncelikle yukarıdaki resimdeki isimlere bakarsak hepsinin aynı amaca farklı soyutlama seviyelerinde hizmet ettiğini görebilirsiniz. Zaman içerisindeki ihtiyaçların değişimi ve gelişimine göre yeni kütüphane ve WebAPI’ler çıkmaktadır.
- Kütüphaneler: JQuery.ajax, Request ve Axios
- WebAPI: XMLHttpRequest, Fetch
Şimdi gelelim örneğimize bu örnekte şöyle bir şey yapalım. Elimizde bir User(Kişiler) ve Meetings(Toplantılar) olmak üzere 2 tane nesnemiz olsun. Öncelikle bunları tasarlayalım.
Aşağıdaki şekilde 3 kişi (onur, ali, ahmet) ve bunların katılacağı toplantılar (meeting1, meeting2, meeting3) bulunsun.
Bu yapıyı hazırladıktan sonra bunun json dosyasını hazırlayalım. Bu json dosyası bizim json-server ile fake bir sunuda bize HTTP üzerinden /users ve /meetings hizmeti verecek. Bunun için bir db.json dosyası oluşturuyoruz.
Daha sonra aşağıdaki adımlar ile sahte(fake) sunucumuzu çalıştırıyoruz.
//Toolu indir
npm install -g json-server //JSon Server ilgili port kendi db.json ile calistir.json-server --watch db.json --port 3004
İlk deneme handleFetchUser ile kullanıcıları çağırmak. CodeEditor’ünde bu örneği görebilirsiniz. Request karşılık gelen nesne json içeriyorsa, bir sonraki adımda response.json bunu then işleminden sonraki diğer pipe iletebilirsiniz.
Senaryomuzu biraz karmaşıklaştıralım. Kullanıcıların yaşları 40'dan fazla olanların toplantılarının listelenmesi . Bunun için yapmamız gereken sunucudan dönen değerleri 40 yaşına göre filtrelemek ve sonrasında her bir kullanıcının katılacağı toplantı Id’lerine erişim (mtId) bunlar üzerinden tek tek toplantıları çekerek verilerine ulaşabilirsiniz.
Peki verileri Paralel olarak çekmek istiyorsak Promise.all fetch işlemlerini bir array toplayıp hepsinin paralel çağrımını gerçekleştirebiliriz. Promise.allSettled, Promise.race, Promise.any bu çağrımların
Son olarak sunucudan veya bizim client kaynaklı 4xx veya 5xx li hatalar aldığımızda bunu fetch içerisinde nasıl yöneteceğimiz konusu. Bunun için response.status kontrol etmemiz gerekiyor.
Kaynak Kodu
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
