fetch

Sorğunu başlat və cavabı oxu

fetch(url) standart olaraq GET başlayır və Response üçün Promise qaytarır. response.json() gövdəni oxuyan ikinci asinxron addımdır. Sorğunun bitməsi ilə məlumatın emalı eyni mərhələ deyil. Aşağıdakı HTML-i saytın mənşəyində sınayanda lokal nümunə məlumatı yüklənir.

<button type="button" id="load">İstifadəçiləri göstər</button>
<p id="status" role="status"></p>
<ul id="users"></ul>
<script>
  document.querySelector('#load').addEventListener('click', async () => {
    const status = document.querySelector('#status');
    const list = document.querySelector('#users');
    status.textContent = 'Yüklənir…';
    list.replaceChildren();
    try {
      const response = await fetch('/examples/frontend/users.json');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const users = await response.json();
      if (!Array.isArray(users)) throw new Error('Gözlənilməyən məlumat');
      for (const user of users) {
        const li = document.createElement('li');
        li.textContent = user.name;
        list.append(li);
      }
      status.textContent = users.length ? 'Hazırdır' : 'İstifadəçi tapılmadı';
    } catch {
      status.textContent = 'Məlumatı yükləmək alınmadı. Yenidən sına.';
    }
  });
</script>

Nümunə

HTTP xətası avtomatik rədd deyil

Fetch şəbəkə xətasında rədd edilə bilər, amma 404 və 500 üçün Response verə bilər. Buna görə ok yoxlaması vacibdir. Gövdə növünə görə json, text, blob kimi metod seç; eyni gövdəni təkrar oxumağa çalışma. İstifadəçi mətnini DOM-a textContent ilə yaz. Yolun users.json hissəsini dəyişərək xəta vəziyyətini yoxla.

Əlavə qeydlər və mənbələr

fetch sorğunu başlayır və Promise qaytarır. Cavabın statusunu yoxladıqdan sonra response.json və ya response.text ilə gövdəni oxu; şəbəkə və emal xətalarını istifadəçiyə aydın göstər.

Niyə vacibdir?

API tətbiqlərin bir-biri ilə məlumat mübadiləsi aparması üçün razılaşdırılmış interfeysdir.

Əvvəlki biliklər

DOM və brauzer hadisələri

Bu mövzuda

fetch və Response
then, json və text
catch və HTTP xəta yoxlaması

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Cavabın statusunu yoxla

Xəta cavabını ayrıca emal et, sonra uğurlu cavabı oxu.

Prosesi son vəziyyətə çatdır.

Sorğu hazırdır
Cavab gözlənilir
HTTP 404
HTTP 200
Məlumat oxundu

Sorğu hazırdır

Məlumatı yükləməyə başla.

fetch("/users.json")

Bu məşq prosesi modelləşdirir.

Özün sına

Düymə ilə lokal JSON-dan məlumat gətir. Yüklənmə, uğur, boş nəticə və tapılmayan fayl vəziyyətlərini göstər.

Nəticəni necə yoxlayım?

Lokal məlumat ekranda görünür; 404 və yanlış JSON tutulur, yüklənmə zamanı vəziyyət aydındır.

Gözlənilən nəticə

Bu saytda lokal fixture ilə Aysel, Murad, Leyla siyahısı görünür. Öz layihəndə həmin JSON faylını eyni yola köçür.
Fayl [] olduqda boş mesaj; yolu səhv yazanda HTTP 404 xətası; sorğu zamanı Yüklənir… görünür.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Yükləmə zamanı düymə bağlanır. Cavab statusu yoxlanılır, əvvəlki nəticə və xəta təmizlənir.

index.html

<button id="load" type="button">Yüklə</button><p id="status" role="status"></p><ul id="users"></ul>
<script type="module" src="main.js"></script>

main.js

const button = document.querySelector('#load');
const status = document.querySelector('#status');
const list = document.querySelector('#users');
button.addEventListener('click', async () => {
  button.disabled = true; status.textContent = 'Yüklənir…'; list.replaceChildren();
  try {
    const response = await fetch('/examples/frontend/users.json');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const users = await response.json();
    for (const user of users) {
      const item = document.createElement('li'); item.textContent = user.name; list.append(item);
    }
    status.textContent = users.length ? 'Yükləndi' : 'İstifadəçi yoxdur';
  } catch (error) { status.textContent = `Yüklənmədi: ${error.message}`; }
  finally { button.disabled = false; }
});

examples/frontend/users.json

[
  {
    "id": 1,
    "name": "Aysel",
    "email": "aysel@example.test"
  },
  {
    "id": 2,
    "name": "Murad",
    "email": "murad@example.test"
  },
  {
    "id": 3,
    "name": "Leyla",
    "email": "leyla@example.test"
  }
]

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.