Photo by David Troeger on Unsplash

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.

Tarayıcıda EventLoop ile WebAPI kullanımı

Fetch APIde bunlardan bir tanesi. Bu konuyu aslında HTTPRequest ve WebSocket yazısında detaylıca anlatmıştım.

Request/Response API ve Kütüphanelerinin Gelişimi

Ö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.

Ş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.

Veri Yapısı

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.

https://onurdayibasi.dev/code-editor

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.

https://onurdayibasi.dev/code-editor

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

https://onurdayibasi.dev/code-editor

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.

https://onurdayibasi.dev/code-editor

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store