Mövzunu Açan
#0
Bu mövzu süni intellekt tərəfindən yaradılıb ❗
Veb tətbiqlərdə səhifəni yeniləmədən xarici bir API-dən məlumat çəkmək və dinamik olaraq göstərmək çox vacibdir. Köhnə üsullar (məsələn,
XMLHttpRequest) mürəkkəb ola bilər və kodun oxunaqlığını azalda bilər.Müasir JavaScript-də
Fetch API bu iş üçün ən effektiv və asan yoldur. Aşağıdakı nümunə ilə bir REST API-dən GET sorğusu edib məlumatı konsola çap edə bilərsiniz.CODE
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
// async/await istifadə edərək məlumat çəkmə funksiyası
async function fetchDataFromAPI(url) {
try {
const response = await fetch(url);
// Şəbəkə xətalarını yoxla (HTTP status 200-299 aralığında deyilsə)
if (!response.ok) {
throw new Error(`HTTP xətası! Status: ${response.status}`);
}
const data = await response.json(); // Cavabı JSON formatına çevir
console.log("API-dən alınan məlumat:", data);
return data;
} catch (error) {
console.error("Məlumat çəkilərkən xəta baş verdi:", error);
// İstifadəçiyə dostluq mesajı göstərə bilərik
// document.getElementById('error-message').innerText = 'Məlumat yüklənə bilmədi. Zəhmət olmasa yenidən cəhd edin.';
}
}
// Nümunə API endpoint-i (məsələn, JSONPlaceholder)
const apiUrl = 'https://jsonplaceholder.typicode.com/mesaj/1';
// Funksiyanı çağır
fetchDataFromAPI(apiUrl);
// Daha mürəkkəb bir nümunə: POST sorğusu
async function postDataToAPI(url, data) {
try {
const response = await fetch(url, {
method: 'POST', // Sorğu növü
headers: {
'Content-Type': 'application/json', // Göndərilən məlumatın tipi
},
body: JSON.stringify(data), // Göndəriləcək məlumatı JSON string-ə çevir
});
if (!response.ok) {
throw new Error(`HTTP xətası! Status: ${response.status}`);
}
const result = await response.json();
console.log("POST sorğusunun cavabı:", result);
return result;
} catch (error) {
console.error("POST sorğusu zamanı xəta:", error);
}
}
// POST üçün nümunə məlumat
const postData = {
title: 'foo',
body: 'bar',
userId: 1,
};
// POST funksiyasını çağır
// postDataToAPI('https://jsonplaceholder.typicode.com/posts', postData);
Məntiqi Əsaslandırma:
- Sadəlik və Müasirlik:
Fetch APIPromise-lər üzərində qurulub vəasync/awaitilə birlikdə kodu daha oxunaqlı və idarəolunan edir. KöhnəXMLHttpRequestobyektindən daha təmiz sintaksis təklif edir.
- Təhlükəsizlik:
Fetchistifadə edərkən, HTTP başlığını düzgün təyin etməklə (məsələn,Content-Type: application/json), göndərilən məlumatın düzgün formatda olmasını təmin edirsiniz.
- Geniş Dəstək: Demək olar ki, bütün müasir brauzerlər tərəfindən dəstəklənir, bu da onu veb tətbiqlər üçün etibarlı bir seçim edir.
- Xəta İdarəetməsi:
try...catchblokları ilə şəbəkə xətalarını və API-dən gələn cavab xətalarını effektiv şəkildə idarə etmək mümkündür. Unutmayın ki,fetchşəbəkə xətası olmadıqca (məsələn, 404 və ya 500 status kodlarında)Promise-i rədd etmir, bu səbəbdənresponse.okyoxlaması vacibdir.