JavaScript-da Fetch API-dan Ilg'or Foydalanish
Fetch API-dan samarali tarmoq so'rovlari uchun foydalanish bo'yicha keng qamrovli qo'llanma, parallel so'rovlar, xatolarni boshqarish va async/await bilan integratsiyani o'z ichiga oladi
So'nggi yangilanish: 2025-01-05Bugun biz HTTP so'rovlarini amalga oshirish uchun kuchli interfeys bo'lgan Fetch API haqida chuqur o'rganamiz. Biz uni samarali ishlatish usullarini, ayniqsa parallel va concurrent dasturlash kontekstida ko'rib chiqamiz.
Fetch API-ga Kirish
Fetch API tarmoq so'rovlarini amalga oshirish uchun kuchli va moslashuvchan imkoniyat taqdim etadi. U XMLHttpRequest-ga nisbatan zamonaviyroq va va'dalarga (promise) asoslangan muqobil variantdir.
Asosiy foydalanish:
fetch('https://api.example.com/data')
.then(javob => javob.json())
.then(malumot => console.log(malumot))
.catch(xato => console.error('Xato:', xato));
Fetch API bilan Parallel So'rovlar
Fetch API-ning katta afzalliklaridan biri - bu bir nechta so'rovlarni parallel ravishda oson amalga oshirish imkoniyatidir.
Promise.all() dan Foydalanish
async function birNechtaUrllarniOlish(urllar) {
try {
const javoblar = await Promise.all(
urllar.map(url => fetch(url))
);
const malumotlar = await Promise.all(
javoblar.map(javob => javob.json())
);
return malumotlar;
} catch (xato) {
console.error('Ma\'lumotlarni olishda xato:', xato);
}
}
const urllar = [
'https://api.example.com/foydalanuvchilar',
'https://api.example.com/postlar',
'https://api.example.com/izohlar'
];
birNechtaUrllarniOlish(urllar)
.then(natijalar => console.log('Barcha ma\'lumotlar:', natijalar));
Bu yondashuv barcha so'rovlarni bir vaqtning o'zida yuboradi va ularning barchasi tugashini kutadi.
Xatolarni Boshqarish va So'rovlarni Moslashtirish
Tarmoq so'rovlari bilan ishlashda to'g'ri xatolarni boshqarish juda muhimdir. Mana, xatolarni qanday boshqarish va so'rovlarni moslashtirish mumkinligi haqida misol:
async function xatolarBilanOlish(url, parametrlar = {}) {
try {
const javob = await fetch(url, {
...parametrlar,
headers: {
'Content-Type': 'application/json',
...parametrlar.headers,
},
});
if (!javob.ok) {
throw new Error(`HTTP xato! holat: ${javob.status}`);
}
const malumot = await javob.json();
return malumot;
} catch (xato) {
console.error('Olish xatosi:', xato);
throw xato; // Chaqiruvchi funktsiyada boshqarish uchun qayta tashlash
}
}
// Foydalanish
xatolarBilanOlish('https://api.example.com/malumot', {
method: 'POST',
body: JSON.stringify({ kalit: 'qiymat' }),
})
.then(malumot => console.log('Ma\'lumot:', malumot))
.catch(xato => console.error('Asosiy kodda xato:', xato));
Async/Await bilan Concurrent So'rovlar
Mana, async/await yordamida concurrent so'rovlarni qanday amalga oshirish va ularning natijalarini boshqarish mumkin:
async function concurrentMalumotlarniOlish() {
try {
const [foydalanuvchilar, postlar, izohlar] = await Promise.all([
fetch('https://api.example.com/foydalanuvchilar').then(res => res.json()),
fetch('https://api.example.com/postlar').then(res => res.json()),
fetch('https://api.example.com/izohlar').then(res => res.json())
]);
console.log('Foydalanuvchilar:', foydalanuvchilar);
console.log('Postlar:', postlar);
console.log('Izohlar:', izohlar);
// Ma'lumotlarni parallel qayta ishlash
const qaytaIshlangan = await Promise.all([
foydalanuvchilarniQaytaIshlash(foydalanuvchilar),
postlarniQaytaIshlash(postlar),
izohlarniQaytaIshlash(izohlar)
]);
return qaytaIshlangan;
} catch (xato) {
console.error('Concurrent olishda xato:', xato);
}
}
async function foydalanuvchilarniQaytaIshlash(foydalanuvchilar) {
// Qayta ishlashni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 100));
return foydalanuvchilar.map(foydalanuvchi => ({ ...foydalanuvchi, qaytaIshlangan: true }));
}
async function postlarniQaytaIshlash(postlar) {
// Qayta ishlashni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 150));
return postlar.map(post => ({ ...post, qaytaIshlangan: true }));
}
async function izohlarniQaytaIshlash(izohlar) {
// Qayta ishlashni simulyatsiya qilish
await new Promise(resolve => setTimeout(resolve, 200));
return izohlar.map(izoh => ({ ...izoh, qaytaIshlangan: true }));
}
concurrentMalumotlarniOlish().then(natijalar => console.log('Qayta ishlangan ma\'lumotlar:', natijalar));
Fetch Navbatini Amalga Oshirish
Ba'zida siz bir vaqtning o'zida amalga oshiriladigan so'rovlar sonini cheklashni xohlashingiz mumkin. Mana fetch navbatining amalga oshirilishi:
class FetchNavbati {
constructor(concurrency = 3) {
this.concurrency = concurrency;
this.navbat = [];
this.bajarilmoqda = 0;
}
navbatgaQoshish(url, parametrlar = {}) {
return new Promise((resolve, reject) => {
this.navbat.push({ url, parametrlar, resolve, reject });
this.navbatdanOlish();
});
}
navbatdanOlish() {
if (this.bajarilmoqda >= this.concurrency || this.navbat.length === 0) {
return;
}
const { url, parametrlar, resolve, reject } = this.navbat.shift();
this.bajarilmoqda++;
fetch(url, parametrlar)
.then(javob => javob.json())
.then(resolve)
.catch(reject)
.finally(() => {
this.bajarilmoqda--;
this.navbatdanOlish();
});
}
}
// Foydalanish
const fetchNavbati = new FetchNavbati(2); // 2 ta concurrent so'rovga ruxsat berish
const urllar = [
'https://api.example.com/malumot1',
'https://api.example.com/malumot2',
'https://api.example.com/malumot3',
'https://api.example.com/malumot4',
'https://api.example.com/malumot5'
];
Promise.all(urllar.map(url => fetchNavbati.navbatgaQoshish(url)))
.then(natijalar => console.log('Barcha natijalar:', natijalar))
.catch(xato => console.error('Navbatda xato:', xato));
Bu navbat faqat belgilangan miqdordagi fetch so'rovlari bir vaqtning o'zida bajarilishini ta'minlaydi.
Vaqt Chegarasi bilan Fetch API
Ba'zida siz fetch so'rovlaringiz uchun vaqt chegarasini o'rnatishni xohlashingiz mumkin. Mana buni qanday amalga oshirish mumkin:
function vaqtChegarasiBilanOlish(url, parametrlar = {}, vaqtChegarasi = 5000) {
return Promise.race([
fetch(url, parametrlar),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('So\'rov vaqti tugadi')), vaqtChegarasi)
)
]);
}
// Foydalanish
vaqtChegarasiBilanOlish('https://api.example.com/malumot', {}, 3000)
.then(javob => javob.json())
.then(malumot => console.log('Ma\'lumot:', malumot))
.catch(xato => console.error('Xato yoki vaqt tugashi:', xato));
Xulosa
Fetch API JavaScript-da tarmoq so'rovlarini amalga oshirish uchun kuchli vositadir. Zamonaviy JavaScript xususiyatlari, masalan async/await va Promise metodlari bilan birgalikda ishlatilganda, u samarali parallel va concurrent ma'lumotlarni olish imkonini beradi.
Quyidagi asosiy nuqtalarni yodda tuting:
- Barcha so'rovlarni tugatish kerak bo'lganda parallel so'rovlar uchun
Promise.all()dan foydalaning. - Har bir fetch so'rovi uchun to'g'ri xatolarni boshqarishni amalga oshiring.
- Concurrent so'rovlarni boshqarish uchun navbat tizimidan foydalanishni o'ylab ko'ring.
- Potentsial sekin API-lar bilan ishlashda so'rovlaringizga vaqt chegarasini o'rnating.
Ushbu usullarni o'zlashtirib, siz murakkab ma'lumotlarni olish stsenariylarini oson boshqaradigan yanada samarali va sezgir veb-ilovalar yaratishingiz mumkin.