JavaScript Fetch API – Asinxron HTTP Sorğuları Göndərmək

JavaScript Fetch API-yə Giriş

Fetch API, müasir veb brauzerlərdə HTTP sorğularını daha asan və çevik şəkildə göndərməyə imkan verən JavaScript interfeysidir. Əvvəl istifadə olunan XMLHttpRequest metodunun yerinə keçərək Promise əsaslı daha oxunaqlı və təmiz kod yazmağa imkan yaradır.

Fetch API, JSON, XML, mətn, şəkil və digər məlumat növləri ilə işləyə bilir və GET, POST, PUT, DELETE kimi müxtəlif HTTP metodlarını dəstəkləyir.

Fetch API ilə HTTP Sorğusu Göndərmək

fetch() metodu URL ünvanı tələb edir və nəticə olaraq Promise qaytarır.

Sadə GET sorğusu nümunəsi:

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json()) // JSON formatına çevirmək
  .then(data => console.log(data)) // Konsola çap etmək
  .catch(error => console.error("Xəta baş verdi:", error)); // Xətanı idarə etmək

💡 Nəticə: Serverdən JSON məlumatı çəkilir və konsolda göstərilir.

Asinxron Kod Yazmaq (Async/Await)

Fetch API, async/await istifadəsi ilə daha oxunaqlı və idarə edilə bilən olur:

async function getUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!response.ok) {
      throw new Error(`HTTP xətası: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Xəta baş verdi:", error);
  }
}

getUsers();

💡 Nəticə: getUsers() funksiyası serverdən məlumatı alır və xətaları idarə edir.

Fetch API ilə POST Sorğusu Göndərmək (Məlumat Yerləşdirmək)

Serverə yeni məlumat göndərmək üçün POST metodu istifadə olunur:

async function createPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "Test Post",
        body: "Bu, Fetch API ilə yaradılmış test postudur.",
        userId: 1
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP xətası: ${response.status}`);
    }

    const data = await response.json();
    console.log("Serverdən cavab:", data);
  } catch (error) {
    console.error("Xəta baş verdi:", error);
  }
}

createPost();

💡 Nəticə: JSON formatında məlumat serverə göndərilir və cavab olaraq JSON qəbul edilir.

HTTP Status Kodlarını İdarə Etmək

Sorğunun uğurlu olub-olmadığını status və ya ok xassələri ilə yoxlamaq mümkündür:

const response = await fetch(url);
if (!response.ok) {
  throw new Error(`HTTP xətası: ${response.status}`);
}

💡 Nəticə: 200-299 arası status kodları uğurlu sorğuları ifadə edir, digər statuslar isə səhvləri göstərir.

Yükləmə Mesajı Göstərmək

İnternet sürəti yavaş olduqda yüklənmə mesajı göstərmək istifadəçi təcrübəsini yaxşılaşdırır:

(async () => {
  const loadingElem = document.querySelector("#loading");
  loadingElem.innerHTML = "Yüklənir...";

  try {
    const users = await getUsers();
    document.querySelector("#content").innerHTML = `<ul>${render(users)}</ul>`;
  } catch (err) {
    document.querySelector("#message").textContent = err.message;
  } finally {
    loadingElem.innerHTML = "";
  }
})();

💡 Nəticə: Məlumat yüklənənə qədər “Yüklənir…” mesajı göstərilir, sonra silinir.

Pulsuz digər resurslar:

Növbəti mövzular:

Açar Sözlər:  JavaScript Fetch API nədir?, Fetch API ilə HTTP sorğuları göndərmək, JavaScript ilə API-dən məlumat almaq, JavaScript və AJAX fərqləri, Fetch API ilə JSON məlumatı əldə etmək, Asinxron proqramlaşdırma və Fetch API, SEO üçün JavaScript optimizasiyası, Google indekslənməsi və Fetch API, Serverə POST, GET, PUT və DELETE sorğuları göndərmək,  Müasir veb inkişaf texnologiyaları və Fetch API, JavaScript ilə veb servislərdən məlumat çəkmək, Brauzer dəstəyi və Fetch API istifadəsi, JavaScript ilə REST API-lərə qoşulmaq, WordPress və JavaScript Fetch API inteqrasiyası