Emre

Emre

WFN Üye
Konular
1,647
Mesajlar
1,743
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 3 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
API’den veri yüklenirken yükleniyor göstergesi eklemek için isteği başlatmadan önce göstergeyi görünür yapın, istek tamamlandığında ise başarılı veya hatalı sonuçtan bağımsız olarak gizleyin. Bunun için genellikle fetch() çağrısından önce bir yükleme alanını gösterir, try...catch...finally yapısında finally bloğunu kullanırsınız. Böylece ağ isteği sürerken kullanıcı bekleme durumunu görür; veri geldiğinde içerik, hata oluştuğunda ise açıklayıcı hata mesajı gösterilir.

Yükleniyor göstergesinin temel çalışma sırası​


Yükleniyor göstergesi yalnızca görsel bir ayrıntı değildir. Kullanıcıya isteğin başlatıldığını ve sayfanın yanıt beklediğini bildirir. Göstergeyi istek tamamlandıktan sonra açarsanız anlamını kaybeder; hata oluştuğunda gizlemezseniz de sayfa sürekli yükleniyormuş gibi görünür.

Uygulama sırası şöyledir:
  1. Yükleme alanını başlangıçta gizleyin.
  2. API isteği başlamadan hemen önce bu alanı görünür yapın.
  3. İstek başarılı olursa gelen veriyi sayfaya yazın.
  4. İstek başarısız olursa hata mesajı gösterin.
  5. İstek hangi sonuçla biterse bitsin yükleme alanını gizleyin.
Aşağıdaki örnek, tarayıcıda doğrudan çalıştırılabilecek varsayımsal bir kullanıcı listesi yükleme senaryosudur. HTML, yükleme mesajı, sonuç alanı ve hata mesajı için gerekli bölümleri içerir; JavaScript ise API isteğini yönetir.

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API veri yükleme göstergesi</title>
  <style>
    #loading {
      display: none;
      color: #555;
    }

    #error {
      color: #b00020;
    }
  </style>
</head>
<body>
  <button id="loadUsersButton">Kullanıcıları yükle</button>

  <p id="loading" aria-live="polite">Veriler yükleniyor...</p>
  <p id="error" role="alert"></p>
  <ul id="userList"></ul>

  <script>
    const loadUsersButton = document.querySelector('#loadUsersButton');
    const loading = document.querySelector('#loading');
    const error = document.querySelector('#error');
    const userList = document.querySelector('#userList');

    async function loadUsers() {
      loading.style.display = 'block';
      error.textContent = '';
      loadUsersButton.disabled = true;

      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');

        if (!response.ok) {
          throw new Error(`İstek başarısız oldu: ${response.status}`);
        }

        const users = await response.json();

        userList.innerHTML = users
          .map(user => `<li>${user.name}</li>`)
          .join('');
      } catch (err) {
        userList.innerHTML = '';
        error.textContent = 'Veriler yüklenirken bir sorun oluştu.';
        console.error(err);
      } finally {
        loading.style.display = 'none';
        loadUsersButton.disabled = false;
      }
    }

    loadUsersButton.addEventListener('click', loadUsers);
  </script>
</body>
</html>

Bu dosyayı bir .html dosyası olarak kaydedip tarayıcıda açtığınızda düğmeye basılmasıyla loadUsers() çalışır. Fonksiyon önce loading.style.display = 'block' ile yükleme mesajını gösterir. Düğmenin devre dışı bırakılması, kullanıcı isteği tamamlanmadan aynı düğmeye art arda basarak birden fazla istek göndermesini önler.

Başarılı sonuçta ne olur?​


API HTTP düzeyinde başarılı bir yanıt verdiğinde response.ok değeri genellikle true olur. Kod daha sonra response.json() ile yanıt gövdesini JavaScript verisine dönüştürür ve kullanıcı adlarını listeye ekler. Bu aşamada yükleniyor mesajı henüz finally çalışmadığı için kısa süreliğine görünür kalabilir; işlem tamamlanınca gizlenir.

Başarılı yanıt alınması yalnızca isteğin sunucu tarafından kabul edildiğini gösterir. Dönen verinin beklediğiniz alanlara sahip olduğunu otomatik olarak kanıtlamaz. Örneğin kod name alanını beklerken API farklı bir alan adı döndürüyorsa istek başarılı görünür, ancak liste yanlış veya boş oluşturulabilir. Bu nedenle gerçek API kullanırken yanıtın biçimini de kontrol etmelisiniz.

Hata oluştuğunda ne olur?​


Ağ bağlantısı kesilirse, alan adı çözümlenemezse veya fetch() çalışırken başka bir hata oluşursa işlem catch bloğuna geçer. HTTP 404 veya 500 gibi yanıtlar için ayrıca response.ok kontrolü gerekir; çünkü fetch(), sunucunun HTTP hata durumu döndürmesini her zaman JavaScript istisnası olarak değerlendirmez.

Bu nedenle örnekte şu kontrol bulunur:

JavaScript: 
if (!response.ok) {
  throw new Error(`İstek başarısız oldu: ${response.status}`);
}

Bu kontrol olmadan 404 veya 500 yanıtının gövdesi işlenmeye çalışılabilir. catch bloğunda kullanıcıya genel bir hata mesajı gösterilirken console.error(err) ile geliştirici konsoluna ayrıntı yazılır. Gerçek projede hata durumunu ayırmak isterseniz HTTP durum kodunu, ağ hatasını ve geçersiz JSON yanıtını farklı mesajlarla ele alabilirsiniz.

Her iki durumda da finally bloğu çalışır:

JavaScript: 
finally {
  loading.style.display = 'none';
  loadUsersButton.disabled = false;
}

Bu bölümün amacı yükleme göstergesini kapatmaktır. Yükleme göstergesini yalnızca başarılı sonuçta gizlemeyin. Hata durumunda da gizlenmezse kullanıcı işlemin hâlâ sürdüğünü sanabilir ve aynı işlemi tekrar tekrar başlatabilir.

Göstergenin görünümünü CSS ile yönetme​


Örnekte yükleme alanı başlangıçta display: none ile gizlenmiştir. JavaScript isteği başlatırken bu değer block yapılır. Daha büyük uygulamalarda sınıf ekleyip çıkarmak daha okunaklı olabilir:

HTML: 
<p id="loading" class="loading" aria-live="polite">Veriler yükleniyor...</p>

CSS: 
.loading {
  display: none;
}

.loading.is-visible {
  display: block;
}

JavaScript: 
loading.classList.add('is-visible');

try {
  // API isteği
} finally {
  loading.classList.remove('is-visible');
}

Bu yaklaşımda JavaScript görünüm ayrıntısını doğrudan belirlemek yerine yalnızca is-visible sınıfını yönetir. Renk, animasyon veya dönen simge eklemek istediğinizde değişiklikleri CSS içinde tutabilirsiniz.

Gerçek API’ye uyarlarken kontrol edilmesi gerekenler​


Örnekteki adres varsayımsaldır. Kendi API adresinizi yazarken yalnızca URL’yi değiştirmek yeterli olmayabilir. API’nin istediği HTTP yöntemi, kimlik doğrulama başlıkları, istek gövdesi ve dönen JSON yapısı da kodla uyumlu olmalıdır.
  • Yanıt verisi doğrudan dizi mi, yoksa data gibi bir alanın içinde mi kontrol edin.
  • API kimlik doğrulama istiyorsa gereken headers değerlerini ekleyin.
  • İstek GET dışında bir yöntem kullanıyorsa method ve gerekiyorsa body değerini belirtin.
  • Tarayıcı konsolunda CORS hatası varsa sorunun yükleme göstergesiyle değil, sunucunun farklı bir alan adından gelen isteğe izin vermemesiyle ilgili olduğunu ayırın.
  • Kullanıcı yeni bir istek başlatmadan önce eski isteğin hâlâ sürüp sürmediğini kontrol edin; gerektiğinde AbortController ile önceki isteği iptal edin.
API yanıtı örneğin şu biçimdeyse:

JSON: 
{
  "data": [
    { "name": "Ayşe" },
    { "name": "Mehmet" }
  ]
}

kodun const users = await response.json(); satırı yerine const { data: users } = await response.json(); kullanması gerekir. Aksi durumda HTTP isteği başarılı olsa bile users.map beklenen dizi üzerinde çalışmayabilir. Buradaki düzeltme, yükleme göstergesinin çalışması için değil, API yanıtının gerçek yapısına uygun veri işlemek için gereklidir.

Yükleme göstergesi için uygun yaklaşımı seçme​


Küçük bir sayfada tek bir API isteği varsa metin göstergesi yeterlidir. Kullanıcı düğmeye basarak işlem başlatıyorsa düğmeyi geçici olarak devre dışı bırakmak da yinelenen istekleri önler. Birden fazla veri alanı aynı anda yükleniyorsa sayfanın tamamını kaplayan gösterge yerine her bölümün kendi yükleme durumunu yönetmek daha doğru olabilir.
DurumUygun göstergeDikkat edilmesi gereken
Tek isteğin beklenmesiMetin veya dönen simgeİstek bitince başarı ve hata durumlarının ikisinde de gizlenmeli
Düğmeyle başlatılan işlemDüğmeyi devre dışı bırakma ve yükleme metniİstek tamamlanınca düğme yeniden etkinleştirilmeli
Sayfanın ilk yüklenmesiİçerik alanında yer tutucu veya iskelet görünümVeri gelmeden boş içerik ile hata durumunu birbirine karıştırmamalı
Birden fazla bağımsız bölümBölüm başına ayrı göstergeBir isteğin tamamlanması diğer bölümlerin durumunu gizlememeli
Tabloya göre seçim yaparken isteğin süresinden çok, kullanıcının hangi alanın beklediğini bilmesi önemlidir. Sayfanın tamamını kilitleyen bir gösterge yalnızca bütün içerik veri gelmeden anlamlı değilse kullanılmalıdır. Bağımsız kartlar veya paneller ayrı ayrı yükleniyorsa her birinin durumunu ayrı göstermek kullanıcıya daha doğru bilgi verir.

Sık sorulan sorular​

Yükleniyor göstergesi neden kaybolmuyor?​

Genellikle hata durumunda gizleme kodu çalışmıyordur. Göstergeyi yalnızca başarılı then bölümünde kapatmak yerine try...catch...finally yapısında finally bloğuna taşıyın. Ayrıca JavaScript dosyasının gerçekten yüklendiğini ve göstergenin seçicisinin doğru öğeyi bulduğunu kontrol edin.

fetch() 404 döndürdüğünde neden catch çalışmıyor?​

fetch() HTTP 404 veya 500 yanıtını çoğu durumda ağ hatası olarak görmez. Bu nedenle response.ok değerini kontrol edip başarısızsa kendiniz hata fırlatmalısınız. Ardından işlem catch bloğuna geçer ve finally göstergiyi kapatır.

İstek sürerken kullanıcı düğmeye tekrar basarsa ne olur?​

Düğme devre dışı bırakılmazsa birden fazla API isteği başlayabilir. Bu, aynı verinin birden çok kez yüklenmesine veya yanıtların beklenmeyen sırayla ekrana yazılmasına yol açabilir. İstek başlarken button.disabled = true yapıp işlem sonunda finally içinde tekrar false değerine getirin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)