JavaScript Dersleri #11: Asenkron JavaScript ve Fetch API

 11. ve son dersimizle JavaScript serimizi harika bir şekilde tamamlıyoruz. Bu derste, modern web geliştirmenin en güçlü yanlarından biri olan, web sayfalarını yenilemeden arka planda veri alışverişi yapmamızı sağlayan Asenkron Programlama ve Fetch API konularını işliyoruz.

JavaScript Dersleri #11: Asenkron JavaScript ve Fetch API

JavaScript normal şartlarda senkron çalışan bir dildir; yani kodlar yukarıdan aşağıya doğru sırayla yürütülür ve bir satırdaki işlem bitmeden alt satıra geçilmez. Ancak, uzak bir sunucudan veri çekmek gibi uzun süren işlemler senkron olsaydı, veri gelene kadar tüm sayfa donardı.

Bu tıkanmayı önlemek için asenkron (aynı anda arka planda çalışan) yapıları kullanırız.

1. Asenkron Mantığı: Veri Beklerken Sayfayı Dondurmamak

Asenkron işlemlerde, uzun sürecek olan işlem arka plana devredilir. JavaScript o işlemin bitmesini beklemeden alt satırlardaki kodları çalıştırmaya devam eder. Arka plandaki işlem tamamlandığında ise sonuç ekrana yansıtılır.

2. Fetch API ile Dış Dünyadan Veri Çekme

Modern JavaScript'te bir API'den (veri sağlayan uzak sunucu) veri almak veya sunucuya veri göndermek için fetch() metodunu kullanırız. fetch(), bize asenkron bir söz, yani bir Promise döner.

// Örnek bir API adresinden sahte kullanıcı verisi çekelim

fetch("https://jsonplaceholder.typicode.com/users/1")

    .then(cevap => cevap.json()) // Gelen veriyi okunabilir JSON formatına çeviriyoruz

    .then(kullanici => {

        console.log(`Gelen Kullanıcı Adı: ${kullanici.name}`);

    })

    .catch(hata => {

        // Eğer internet kesilirse veya API çalışmazsa burası tetiklenir

        console.error("Veri çekilirken bir hata oluştu:", hata);

    });

3. Daha Temiz Bir Yazım: Async / Await

.then() zincirleri kod büyüdükçe karmaşık bir hal alabilir. ES8 ile gelen async ve await anahtar kelimeleri, asenkron kodları tıpkı senkron kod yazıyormuş gibi düz ve son derece okunabilir yazmamızı sağlar.

• Bir fonksiyonun içinde await kullanabilmek için, o fonksiyonun başına async kelimesi eklenmelidir.

• await, arkasından gelen asenkron işlem (veri çekme gibi) tamamlanana kadar kodun o satırda geçici olarak duraklamasını sağlar.

// Fonksiyonu asenkron olarak tanımlıyoruz

async function kullaniciGetir() {

    try {

        // Veri gelene kadar bekle ve 'cevap' değişkenine ata

        let cevap = await fetch("https://jsonplaceholder.typicode.com/users/1");

        

        // JSON dönüşümü bitene kadar bekle

        let kullanici = await cevap.json();

        

        console.log(`Async/Await ile Gelen: ${kullanici.name}`);

    } catch (hata) {

        // Hata yakalama mekanizması

        console.error("Hata yakalandı:", hata);

    }

}

// Fonksiyonu çağırıyoruz

kullaniciGetir();

Blogger İçin Neden Önemli?

Bu asenkron yapıları kullanarak Blogger sitenizde sayfa yenilenmeden çalışan "Dinamik Arama Kutuları", "Hava Durumu Widget'ları" veya "Dış Kaynaklı Popüler Yayınlar" gibi gelişmiş özellikleri kolaylıkla kodlayabilirsiniz.

Tebrikler! 11 derslik temel ve orta düzey JavaScript Ders Serisini tamamen bitirdiniz.