Fetch API
fetch() dan oldin asosan serverga so'rovlar XMLHttpRequest obyekti yordamida yuborilgan:
let api = 'https://restcountries.com/v3.1/independent?status=true';
const getData = (resourse) => {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.addEventListener('readystatechange', () => {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
resolve(data)
} else if (xhr.readyState === 4) {
reject('Xatolik yuz berdi')
}
})
xhr.open('GET', resourse);
xhr.send();
})
}
getData(api)
.then((data) => {
console.log(data);
})
.catch((err) => {
console.log(err);
})
Hozir esa fetch() orqali yuqoridagilarni ancha qisqa kodlar yordamida amalga oshirish mumkin.
Biz fetch() ga qavslar ichida shunchaki qayerga so'rov yuborishini aytamiz xolos:
let api = 'https://restcountries.com/v3.1/independent?status=true';
fetch(api)
Bizga bu so'rov evaziga Promise qaytaradi. Promise qaytarilganda .then va .catch ishga tushadi.
let api = 'https://restcountries.com/v3.1/independent?status=true';
fetch(api)
.then(data => data.json())
.then(info => console.log(info))
.catch((err) => { console.error(err) })
Birinchi .then ichida resolve() dan kelgan ma'lumotni json() metodi orqali obyekt ko'rinishiga o'tkazib olyapmiz va uni return qilib yuboryapmiz. (bu yerda return so'zi yozilmagan, statement bitta bo'lgani uchun arrow function da return ni yozish shart emas).
Promise chaining mavzusidan ma'lumki agar birinchi .then ichidagi funksiya return qilsa qaygan ma'lumot undan keyingi .then ning ichidagi callback funksiya parametriga kelib tushadi. Biz kelgan ma'lumotni biror o'zgaruvchiga tenglab uni ishlatishimiz mumkin: bizning holda "info"