Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.
Merhabalar.
Bir önceki yazımda Get isteği ile veri çekmeyi öğrenmiştik. Fetch API bize her ne kadar Promise tabanlı bir veri getirme olanağı sunsa da ilk kullandığımız haliyle biraz karmaşa var gibiydi kodlarımızda. Çünkü çok fazla iç içe then kullanmak zorunda kaldık.
Bu yazımda bu durumu çözmek için, async await yapısını kullanarak get isteği nasıl yapılır veriler nasıl işlenir buna bakacağız.
Bir önceki yazı için aşağıdaki linki kullanabilirsiniz.
async await Yapısı Nedir?
async ve await, JavaScript’te asenkron (asynchronous) programlamayı daha okunabilir ve yönetilebilir hale getiren bir yapıdır. Asenkron programlama, uzun süren işlemleri bloke etmeden diğer işlemlerin devam etmesine olanak tanır. Bu özellikle web tarayıcılarındaki ve sunucu taraflı JavaScript uygulamalarındaki işlemlerde yaygın olarak kullanılır.
async fonksiyonlar, asenkron operasyonları gerçekleştirmek için kullanılır ve bu fonksiyonlar her zaman bir Promise döner. Bir fonksiyonu async olarak işaretlediğinizde, bu fonksiyonun içinde await anahtar kelimesini kullanarak diğer asenkron işlemlerin tamamlanmasını bekleyebilirsiniz.
async-await İle Fetch Kullanımı
const loadPosts = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setPosts(data);
} catch (error) {
console.error('There was an error!', error);
}
};Bu kod, JSONPlaceholder adlı bir API’dan veri çekmek için kullanılan bir JavaScript fonksiyonunu içeriyor.
Bir önceki yapıya göre ne kadar sadeleşti kodumuz dikkatinizi çekmiş olmalı.
Bir fonksiyon içinde belli bir süre sürmesini öngördüğümüz işlem varsa bu fonksiyonun başına async anahtar kelimesini koyarız. Bunun anlamı şudur ben içerde asenkron çalışmanı istediğim işlemler yapacağım haberin olsun.
Sonra hangi işlemin zaman alacağını düşünüyorsak o işleminde başına await anahtar kelimesini koyarız. Bunun anlamı şudur.
Örneğin aşağıdaki kodda ben bir istek atacağım endpoint’e, o sana bir cevap dönecek, o cevap gelene kadar bekle. Böylece bu işlemin sonucu gelene kadar bekleriz. Sonra diğer adıma devam edilir.
const response = await fetch('https://jsonplaceholder.typicode.com/posts');Normalde yukarıdan aşağıya kodlarımız hızla çalıştığı için, örneğin API’a attığım isteğin sonucu 3 sn’de dönüyorsa bir sonraki adımda bu response’u kullanan kod response’un boş olması nedeniyle ya hata verecektir duruma göre ya da boş veriyle işlem yapacaktır. Halbuki verilerimiz biraz sonra gelecekti. İşte burada async-await ile bunu sağlıyoruz.
Kodun açıklamasına detaylıca bir tekrar bakalım.
fetch('https://jsonplaceholder.typicode.com/posts'): Belirtilen URL’ye bir GET isteği başlatır. Bu, genellikle test amaçları için kullanılan yaygın bir API’dir.
const response = await fetch(...): İşlemin tamamlanmasını beklemek için await anahtar kelimesini kullanır. Sonuç, response değişkeninde saklanır.
const data = await response.json(): Benzer şekilde, yanıtın içeriğini JSON olarak ayrıştırmak için await kullanılır. Ayrıştırılmış veri data değişkeninde saklanır.
setPosts(data): Ayrıştırılmış veriyi işlemek için varsayılan olarak kabul edilen setPosts adlı bir fonksiyonu çağırır. Bu fonksiyon, muhtemelen durumu güncellemek veya alınan gönderileri işlemek için kullanılır.
catch (error): try bloğu sırasında herhangi bir hata oluşursa (örneğin, ağ hatası, ayrıştırma hatası), hata yakalanır ve console.error kullanılarak konsola hata mesajı yazdırılır.
Sayfaya gider Load Posts butonuna tekrar tıklarsam aşağıdaki gibi bir görüntü elde ederim.
Böylece bir API’dan verilerimizi async await kullanarak getirmiş olduk.
Bir sonraki yazımda görüşmek üzere.
