Web Sitesi Kodlama Eğitimi – 9: Asenkron JavaScript ve API Yönetimi
Şu ana kadar yazdığımız tüm kodlar yukarıdan aşağıya doğru sırayla çalıştı. Ancak internet dünyasında bir sunucudan veri çekmek zaman alır. Sayfanızın o veri gelene kadar “donup kalmasını” istemezsiniz. İşte bu kodlama eğitimi bölümünde, arka planda veri çekilirken sayfanın çalışmaya devam etmesini sağlayan asenkron programlamayı keşfedeceğiz.
1. Senkron vs. Asenkron: JavaScript’in Zaman Yönetimi
Standart bir kodlama sürecinde her satır bir öncekinin bitmesini bekler (Senkron). Ancak bir API’den 1000 tane ürün listesi çekmek 2 saniye sürebilir.
Neden Asenkron? Eğer asenkron yapı olmasaydı, veri yüklenirken kullanıcı hiçbir butona tıklayamaz, sayfa tamamen kitlenirdi.
Non-blocking (Bloklamayan) Yapı: JavaScript, uzun sürecek işleri arka plana atar ve sıradaki kodu çalıştırmaya devam eder. İşlem bittiğinde ise sonucu size getirir. Bu profesyonel kodlama eğitimi sürecinde, akıcı bir kullanıcı deneyimi sunmanın altın kuralıdır.
2. Promise ve Modern Async/Await Sözdizimi
Eskiden “Callback Hell” dediğimiz karmaşık bir yapı varken, günümüzde her şey çok daha temiz bir “Söz Verme” (Promise) mantığına dayanıyor.
Promise (Söz): “Sana bu veriyi getireceğim, ama şimdi değil. Ya başarıyla getireceğim (Resolve) ya da bir hata olacak (Reject).”
Async/Await: JavaScript’in en modern ve okunabilir halidir. Kodun içine await koyarak, “burada bir veri bekliyoruz, o gelene kadar bu satırı bekle ama diğer işleri durdurma” demiş oluruz. Bu yöntem, karmaşık kodlama eğitimi projelerini bile bir hikaye gibi okunabilir kılar.
3. JSON: İnternetin Ortak Dili
Bir web sitesi ile bir sunucu (server) konuşurken verileri belirli bir formatta gönderirler. Bu formatın adı JSON’dır.
Hafif ve Hızlı: XML gibi eski yapılara göre çok daha hafiftir ve JavaScript nesnelerine (Object) anında dönüştürülebilir.
Örnek Yapı: {“isim”: “Ahmet”, “yas”: 30} şeklinde, anahtar ve değer çiftlerinden oluşur. Bu kodlama eğitimi serisinde, API’lerden gelen tüm verilerin bu yapıda olduğunu göreceksiniz.
4. Fetch API: Dış Dünyadan Veri Çekme
Sitenize canlı hava durumu, döviz kurları veya bir e-ticaret sitesinin ürün listesini getirmek için fetch komutunu kullanırız.
API (Application Programming Interface): Diğer sitelerin size sunduğu “veri kapılarıdır”.
Kullanım Senaryosu: fetch(‘api-adresi’) ile kapıyı çalarız, gelen JSON verisini JavaScript nesnesine çeviririz ve DOM manipülasyonu (8. ders) ile ekrana basarız. Artık siteniz gerçek zamanlı bilgilerle güncellenebilir!
5. Hata Yönetimi: Try-Catch Mekanizması
İnternet dünyasında her şey her zaman yolunda gitmez. Sunucu çökebilir, kullanıcının interneti kesilebilir veya yanlış bir adres çağrılabilir.
Try (Dene): Riskli kodlarınızı (veri çekme gibi) bu blok içine yazarsınız.
Catch (Yakala): Eğer bir hata olursa, sistem çökmez; hata bu blokta yakalanır ve kullanıcıya “Üzgünüz, verilere ulaşılamadı” gibi profesyonel bir mesaj gösterilir. Gerçek bir kodlama eğitimi, sadece çalışan kodu değil, hata veren kodu da yönetmeyi öğretir.
Uzmanından İpuçları ve Sık Yapılan Hatalar
Hata: await anahtar kelimesini normal bir fonksiyon içinde kullanmaya çalışmak.
Çözüm: await sadece async olarak tanımlanmış fonksiyonların içinde çalışır.
İpucu: Veri çekerken kullanıcıya bir “Yükleniyor…” ikonu (Spinner) göstermeyi unutmayın. Asenkron işlemler arka planda sürerken kullanıcının bir şeyler olduğunu bilmesi UX (Kullanıcı Deneyimi) açısından hayatidir.
Sıkça Sorulan Sorular (SSS)
Soru 1: Kendi API’mi oluşturabilir miyim? Cevap: Evet, ancak bunun için Backend (Node.js, Python, PHP vb.) dillerini öğrenmeniz gerekir. Şimdilik açık kaynaklı ücretsiz API’leri (JSONPlaceholder gibi) kullanarak pratik yapabilirsiniz.
Soru 2: API anahtarı (API Key) nedir, neden istenir? Cevap: Bazı servisler verilerini sadece kayıtlı kullanıcılara verir. Bu anahtar, sizin o servise giriş kartınızdır ve asla başkalarıyla (veya GitHub’da açıkça) paylaşılmamalıdır.
Soru 3: fetch yerine neden Axios kullananlar var? Cevap: Axios, fetch fonksiyonunun üzerine inşa edilmiş daha gelişmiş özellikler sunan harici bir kütüphanedir. Ancak modern kodlama eğitimi standartlarında, önce yerleşik olan fetch yapısını öğrenmek esastır.
Soru 4: Veri çekerken SEO nasıl etkilenir? Cevap: Eğer önemli içerikleri sadece JavaScript ile sayfa yüklendikten sonra çekiyorsanız, Google botları bazen bu içeriği görmeyebilir. Çok önemli SEO metinlerini sunucuda oluşturup (SSR) göndermek daha garantidir.
Soru 5: Asenkron kod yazmak sitemi yavaşlatır mı? Cevap: Aksine, sitenizi hızlandırır! Tüm verilerin gelmesini beklemeden sayfayı yüklediğiniz için kullanıcı sitenizi anında kullanmaya başlar, ağır veriler arka planda sessizce yüklenir.
Bölüm Özeti ve Gelecek Ders
Bu bölümde, web sitenizin sınırlarını aşarak dış dünyadan nasıl canlı veri çekileceğini ve modern hata yönetimini öğrendik. Artık veriye hükmeden profesyonel bir geliştirici yolunda dev bir adım attınız.
Eğitim 10’da bizi ne bekliyor? (Final) Serimizin muhteşem finaline geliyoruz: “Web Sitenizi Dünyaya Açın: Yayınlama, SEO ve Performans“. Yazdığımız tüm bu kodları bir sunucuya yükleyip (Deploy), Google’da en üstte çıkması için son rötuşları yapacağız.
Uygulama Ödevi: Ücretsiz bir API’den (örneğin: JSONPlaceholder) rastgele bir kullanıcı listesi çekin ve bu kullanıcıların isimlerini sayfanızdaki bir listede (ul) görüntüleyen bir async fonksiyon yazın!