JavaScript Fetch API
Herkese merhaba bu benim JavaScript üzerine ilk teknik yazım umarım herkes için bilgilendirici olur :)
Günümüzde modern web siteleri çok büyük veriler ile GET/POST işlemleri yapar bu verileri kullanıcıya sunmak için genellikle API’lar kullanılır, peki biz yazılım geliştirici olarak bu verileri nasıl çekeriz ?
fetch() : En basit tabiri ile web tarayıcılarından sunuculara HTTP istekleri yapmanızı sağlayan modern bir method.
fetch örnekteki gibi yalnızca bir parametre alır veriyi çekeceğiniz URL
Async/await
Bu örnekte kullandığımız fonksiyon çeşidi bize kod temizliği konusunda yardım edecek ve daha okunabilir bir kodumuz olacak ayrıca sağladığı “Asynchronously wait” özellikleri için bu tür işlemlerde kullanılması önerilir.
Yazımı uzatmak istemedim ,daha detaylı bilgi almak için merak edenler olursa bakabilir:https://javascript.info/async-await
Konumuza geri dönecek olursak ,veriyi almak için öncelikle API fetch edilir daha sonra bu verinin kolay bir şekilde DOM üzerinde render edilmesi için JSON olarak dönüştürülür ,farklı durumlarda bu dönüştürme işini kod üzerinde ele aldım json(), blob(), formData() vearrayBuffer() türleri de mevcut.
DOM
Açılımı Document Object Model , en basit tabiri ile web sayfası yüklendiği zaman kullanıcının gördüğü sayfa.Örnekte olduğu gibi JavaScript kullanarak site içinde daha çok kullanıcı etkileşimi sağlamak için “Document manipulation” teknikleri kullanılır.
daha fazla detay için:https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
İstediğimiz verileri DOM üzerinde göstermek için for loop ile HTML içinde authors id’li <p>tagının içini istediğim bu veri ile doldurdum ve fonksiyonu execute ettikten sonra her duruma karşı catch() ile basit bir hata yakalama işlemi yaptım.<p id="authors"></p>
innerHTML methodu bize String veri içinde <br> gibi basit HTML kodlarını eklememiz için yardımcı olacaktır.
Chrome DevTools üzerindeki JSON verisinin görüntüsü bu şekilde:
Özet
Basit şekilde günümüzde en çok kullanılan methodlardan olan fetch ve Async/await ile bir API üzerinden GET işlemi yapmayı ve DOM üzerinde JSON verilerini render etme işlemini gösterdim, bu örnek üzerinde çeşitli değişiklikler yapıp .map() gibi yeni methodları kullanıp kendinizi geliştirebilrisiniz. Kaynak kodları kolayca ulaşmanız için Github hesabım üzerinden paylaştım.
Sorunuz olursa lütfen çekinmeden sorun: ardabuyukkaya@protonmail.com
👨💻 https://github.com/whichbuffer/Fetch_Data
Okumanızı tavsiye ettiğim yazılar:
