JavaScript Iterator Helper'lari va Parallel Bajarilish: Konkurent Oqimlarni Qayta Ishlashni Chuqur O'rganish

Veb-ishlab chiqishning doimiy rivojlanayotgan landshaftida unumdorlik shunchaki bir xususiyat emas; bu fundamental talabdir. Ilovalar tobora kattalashib borayotgan ma'lumotlar to'plamlari va murakkab operatsiyalarni qayta ishlayotgan bir paytda, JavaScript'ning an'anaviy, ketma-ket tabiati jiddiy to'siqqa aylanishi mumkin. API'dan minglab yozuvlarni olishdan tortib, katta fayllarni qayta ishlashgacha, vazifalarni konkurent (bir vaqtda) bajarish qobiliyati birinchi darajali ahamiyatga ega.

Iterator Helper'lari taklifiga e'tibor qarating, bu TC39'ning 3-bosqichdagi taklifi bo'lib, ishlab chiquvchilarning JavaScript'da iteratsiyalanuvchi ma'lumotlar bilan ishlash usulini inqilob qilishga tayyor. Uning asosiy maqsadi iteratorlar uchun boy, zanjirlanadigan API taqdim etish bo'lsa-da (`Array.prototype` massivlar uchun taklif qilganidek), uning asinxron operatsiyalar bilan sinergiyasi yangi ufqlarni ochadi: nafis, samarali va nativ konkurent oqimlarni qayta ishlash.

Ushbu maqola sizni asinxron iterator yordamchilari yordamida parallel bajarish paradigmasi bo'ylab yo'naltiradi. Biz 'nima uchun', 'qanday qilib' va 'keyin nima' kabi savollarni o'rganamiz va sizga zamonaviy JavaScript'da tezroq, barqarorroq ma'lumotlarni qayta ishlash quvurlarini yaratish uchun bilim beramiz.

To'siq: Iteratsiyaning Ketma-ket Tabiati

Yechimga sho'ng'ishdan oldin, keling, muammoni aniq belgilab olaylik. Keng tarqalgan stsenariyni ko'rib chiqing: sizda foydalanuvchi ID'lari ro'yxati bor va har bir ID uchun API'dan batafsil foydalanuvchi ma'lumotlarini olishingiz kerak.

`async/await` bilan `for...of` tsiklidan foydalangan an'anaviy yondashuv toza va o'qilishi oson ko'rinadi, lekin uning yashirin unumdorlik kamchiligi bor.

            
async function fetchUserDetailsSequentially(userIds) {
  const userDetails = [];
  console.time("Sequential Fetch");

  for (const id of userIds) {
    // Har bir 'await' promise hal bo'lguncha butun tsiklni to'xtatib turadi.
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    userDetails.push(user);
    console.log(`Foydalanuvchi ${id} olindi`);
  }

  console.timeEnd("Sequential Fetch");
  return userDetails;
}

const ids = [1, 2, 3, 4, 5];
// Agar har bir API so'rovi 1 soniya vaqt olsa, bu butun funksiya taxminan 5 soniya davom etadi.
fetchUserDetailsSequentially(ids);

            

              
                Copy
              
            
          

Ushbu kodda, tsikl ichidagi har bir `await` o'sha maxsus tarmoq so'rovi tugamaguncha keyingi bajarilishni bloklaydi. Agar sizda 100 ta ID bo'lsa va har bir so'rov 500ms vaqt olsa, umumiy vaqt hayratlanarli darajada 50 soniyani tashkil etadi! Bu juda samarasiz, chunki operatsiyalar bir-biriga bog'liq emas; 2-foydalanuvchini olish uchun 1-foydalanuvchi ma'lumotlari birinchi bo'lib mavjud bo'lishi shart emas.

Klassik Yechim: `Promise.all`

Ushbu muammoning tasdiqlangan yechimi `Promise.all` hisoblanadi. U bizga barcha asinxron operatsiyalarni bir vaqtning o'zida boshlash va ularning barchasi tugashini kutish imkonini beradi.

            
async function fetchUserDetailsWithPromiseAll(userIds) {
  console.time("Promise.all Fetch");

  const promises = userIds.map(id => 
    fetch(`https://api.example.com/users/${id}`).then(res => res.json())
  );

  // Barcha so'rovlar bir vaqtda (konkurent) yuboriladi.
  const userDetails = await Promise.all(promises);

  console.timeEnd("Promise.all Fetch");
  return userDetails;
}

// Agar har bir API so'rovi 1 soniya vaqt olsa, endi bu faqat ~1 soniya (eng uzun so'rov vaqti) davom etadi.
fetchUserDetailsWithPromiseAll(ids);

            

              
                Copy
              
            
          

`Promise.all` juda katta yaxshilanishdir. Biroq, uning ham o'z cheklovlari bor:

• Xotira Iste'moli: U barcha promise'lardan iborat massivni oldindan yaratishni talab qiladi va qaytarishdan oldin barcha natijalarni xotirada saqlaydi. Bu juda katta yoki cheksiz ma'lumotlar oqimlari uchun muammoli.
• Qayta Bosimni Boshqarishning Yo'qligi: U barcha so'rovlarni bir vaqtning o'zida yuboradi. Agar sizda 10 000 ta ID bo'lsa, siz o'z tizimingizni, serverning so'rovlar chegarasini (rate limit) yoki tarmoq ulanishini haddan tashqari yuklashingiz mumkin. Konkurentlikni, aytaylik, bir vaqtda 10 ta so'rov bilan cheklashning o'rnatilgan usuli yo'q.
• "Hammasi yoki Hech narsa" Tamoyilidagi Xatoliklarni Qayta Ishlash: Agar massivdagi bitta promise rad etilsa, `Promise.all` darhol rad etadi va boshqa barcha muvaffaqiyatli promise'larning natijalarini yo'qotadi.

Aynan shu yerda asinxron iteratorlar va taklif etilayotgan yordamchilarning kuchi namoyon bo'ladi. Ular konkurentlik ustidan nozik nazorat bilan oqimga asoslangan qayta ishlash imkonini beradi.

Asinxron Iteratorlarni Tushunish

Yugurishdan oldin, yurishni o'rganishimiz kerak. Keling, asinxron iteratorlarni qisqacha eslab o'tamiz. Oddiy iteratorning `.next()` metodi `{ value: 'some_value', done: false }` kabi ob'ektni qaytarsa, asinxron iteratorning `.next()` metodi shu ob'ektga hal bo'ladigan Promiseni qaytaradi.

Bu bizga vaqt o'tishi bilan keladigan ma'lumotlarni, masalan, fayl oqimidan keladigan qismlar, sahifalangan API natijalari yoki WebSocket'dan keladigan hodisalarni iteratsiya qilish imkonini beradi.

Asinxron iteratorlarni iste'mol qilish uchun biz `for await...of` tsiklidan foydalanamiz:

            
// Har soniyada qiymat beradigan generator funksiyasi.
async function* createSlowStream() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

async function consumeStream() {
  const stream = createSlowStream();
  // Tsikl keyingi qiymat berilishini har bir 'await'da kutib to'xtaydi.
  for await (const value of stream) {
    console.log(`Qabul qilindi: ${value}`); // Har soniyada bittadan 1, 2, 3, 4, 5 ni chiqaradi
  }
}

consumeStream();

            

              
                Copy
              
            
          

O'yinni O'zgartiruvchi: Iterator Yordamchilari Taklifi

TC39 Iterator Yordamchilari taklifi `Iterator.prototype` va `AsyncIterator.prototype` orqali barcha iteratorlarga (ham sinxron, ham asinxron) `.map()`, `.filter()` va `.take()` kabi tanish metodlarni qo'shadi. Bu bizga iteratorni avval massivga aylantirmasdan kuchli, deklarativ ma'lumotlarni qayta ishlash quvurlarini yaratish imkonini beradi.

Sensor ko'rsatkichlarining asinxron oqimini ko'rib chiqing. Asinxron iterator yordamchilari bilan biz uni shunday qayta ishlashimiz mumkin:

            
async function processSensorData() {
  const sensorStream = getAsyncSensorReadings(); // Asinxron iteratorni qaytaradi

  // Nativ asinxron iterator yordamchilari bilan taxminiy kelajakdagi sintaksis
  const processedStream = sensorStream
    .filter(reading => reading.temperature > 30) // Yuqori harorat uchun filtrlash
    .map(reading => ({ ...reading, temperature: toFahrenheit(reading.temperature) })) // Farengeytga o'tkazish
    .take(10); // Faqat birinchi 10 ta muhim ko'rsatkichni olish

  for await (const criticalReading of processedStream) {
    await sendAlert(criticalReading);
  }
}

            

              
                Copy
              
            
          

Bu nafis, xotira jihatidan samarali (bir vaqtda bitta elementni qayta ishlaydi) va o'qilishi juda oson. Biroq, standart `.map()` yordamchisi, hatto asinxron iteratorlar uchun ham, hali ham ketma-ket ishlaydi. Har bir map operatsiyasi keyingisi boshlanishidan oldin tugashi kerak.

Yetishmayotgan Qism: Konkurent Map

Unumdorlikni optimallashtirish uchun haqiqiy kuch konkurent map g'oyasidan kelib chiqadi. Agar `.map()` operatsiyasi oldingisi hali kutilayotgan paytda keyingi elementni qayta ishlashni boshlasa nima bo'ladi? Bu iterator yordamchilari bilan parallel bajarishning asosidir.

`mapConcurrent` yordamchisi hozirgi taklifning rasmiy qismi bo'lmasa-da, asinxron iteratorlar taqdim etgan qurilish bloklari bizga bu naqshni o'zimiz amalga oshirish imkonini beradi. Uni qanday qurishni tushunish zamonaviy JavaScript konkurentligi haqida chuqur tushuncha beradi.

Konkurent `map` Yordamchisini Yaratish

Keling, o'zimizning `asyncMapConcurrent` yordamchimizni loyihalashtiraylik. U asinxron iteratorni, mapper funksiyasini va konkurentlik chegarasini qabul qiladigan asinxron generator funksiyasi bo'ladi.

Bizning maqsadlarimiz:

1. Manba iteratoridagi bir nechta elementni parallel ravishda qayta ishlash.
2. Konkurent operatsiyalar sonini belgilangan darajada cheklash (masalan, bir vaqtda 10 ta).
3. Natijalarni manba oqimida paydo bo'lgan asl tartibda berish.
4. Qayta bosimni tabiiy ravishda boshqarish: elementlarni manbadan ular qayta ishlanishi va iste'mol qilinishidan tezroq tortib olmaslik.

Amalga Oshirish Strategiyasi

Biz faol vazifalar hovuzini (pool) boshqaramiz. Bir vazifa tugagach, biz yangisini boshlaymiz, faol vazifalar soni hech qachon konkurentlik chegarasidan oshmasligini ta'minlaymiz. Kutilayotgan promise'larni massivda saqlaymiz va keyingi vazifa qachon tugaganini bilish uchun `Promise.race()`'dan foydalanamiz, bu bizga uning natijasini berish va uni almashtirish imkonini beradi.

            
/**
 * Asinxron iterator elementlarini konkurentlik chegarasi bilan parallel ravishda qayta ishlaydi.
 * @param {AsyncIterable} source Manba asinxron iterator.
 * @param {(item: T) => Promise} mapper Har bir elementga qo'llaniladigan asinxron funksiya.
 * @param {number} concurrency Parallel operatsiyalarning maksimal soni.
 * @returns {AsyncGenerator}
 */
async function* asyncMapConcurrent(source, mapper, concurrency) {
  const executing = []; // Hozirda bajarilayotgan promise'lar hovuzi
  const iterator = source[Symbol.asyncIterator]();

  async function processNext() {
    const { value, done } = await iterator.next();
    if (done) {
      return; // Qayta ishlash uchun boshqa elementlar yo'q
    }
    
    // Map operatsiyasini boshlash va promise'ni hovuzga qo'shish
    const promise = Promise.resolve(mapper(value)).then(mappedValue => ({ 
        result: mappedValue,
        sourceValue: value
    }));

    executing.push(promise);
  }

  // Hovuzni konkurentlik chegarasigacha boshlang'ich vazifalar bilan to'ldirish
  for (let i = 0; i < concurrency; i++) {
    processNext();
  }

  while (executing.length > 0) {
    // Bajarilayotgan promise'lardan birortasining hal bo'lishini kutish
    const finishedPromise = await Promise.race(executing);

    // Indeksni topish va tugallangan promise'ni hovuzdan olib tashlash
    const index = executing.indexOf(finishedPromise);
    executing.splice(index, 1);

    const { result } = await finishedPromise;
    yield result;

    // Bo'sh joy ochilgani uchun, agar yana elementlar bo'lsa, yangi vazifani boshlash
    processNext();
  }
}

            

              
                Copy
              
            
          

            
// Tasodifiy kechikish bilan API so'rovini simulyatsiya qiluvchi yordamchi
function fetchUser(id) {
  const delay = Math.random() * 1000 + 500; // 500ms - 1500ms kechikish
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`${id} foydalanuvchisi uchun so'rov hal qilindi`);
      resolve({ id, name: `User ${id}`, fetchedAt: Date.now() });
    }, delay);
  });
}

// ID'lar oqimini yaratish uchun asinxron generator
async function* createIdStream() {
  for (let i = 1; i <= 20; i++) {
    yield i;
  }
}

async function main() {
  const idStream = createIdStream();
  const concurrency = 5; // Bir vaqtda 5 ta so'rovni qayta ishlash

  console.time("Concurrent Stream Processing");

  const userStream = asyncMapConcurrent(idStream, fetchUser, concurrency);

  // Natijaviy oqimni iste'mol qilish
  for await (const user of userStream) {
    console.log(`Qayta ishlandi va qabul qilindi:`, user);
  }

  console.timeEnd("Concurrent Stream Processing");
}

main();

            

              
                Copy