Asinxronlik

JavaScript bitta thread'da ishlaydi, lekin asinxron operatsiyalar (timer, fetch, DOM event) orqali bloklanmasdan ishlaydi. Event Loop, Promise va async/await — intervyuning eng muhim qismi.

Event Loop — Call Stack, Web API, Microtask, Macrotask

Middle

Nima bu?

Event Loop — JavaScript runtime'ning asinxron kodni boshqarish mexanizmi. **Call Stack** — hozir bajarilayotgan sinxron funksiyalar. **Web API** (browser) — `setTimeout`, `fetch`, DOM event kabi asinxron ishlarni background'da bajaradi. Callback tayyor bo'lganda **Microtask queue** (`Promise.then`, `queueMicrotask`) yoki **Macrotask queue** (`setTimeout`, `setInterval`) ga tushadi. Stack bo'sh bo'lganda avval barcha microtask'lar, keyin bitta macrotask bajariladi.

Kod misoli

console.log('1 — sync');

setTimeout(() => console.log('2 — macrotask'), 0);

Promise.resolve()
  .then(() => console.log('3 — microtask'))
  .then(() => console.log('4 — microtask'));

queueMicrotask(() => console.log('5 — microtask'));

console.log('6 — sync');

// Chiqish tartibi: 1, 6, 3, 5, 4, 2
// Qoida: sync → barcha microtask → keyin macrotask

Imtihonda

- Quyidagi kodning chiqish tartibini tushuntiring: `setTimeout(() => console.log(1), 0); Promise.resolve().then(() => console.log(2)); console.log(3);` - Microtask va macrotask farqi nima? Nima uchun Promise `setTimeout(0)` dan oldin bajariladi?

Yodlash uchun

Stack bo'sh → microtask (to'liq) → macrotask (bittasi) → yana microtask.

Angular Zone.js aynan macrotask/microtask'larni patch qilib change detection'ni trigger qiladi — shuning uchun Event Loop bilimi Angular uchun ham muhim.

Promise — then/catch/finally, Promise.all/allSettled/race

JuniorMiddle

Nima bu?

Promise — asinxron operatsiyaning kelajakdagi natijasi (fulfilled, rejected yoki pending). `then` muvaffaqiyat, `catch` xato, `finally` har holatda ishlaydi. `Promise.all` — hammasi muvaffaqiyatli bo'lsa natija massivi; bittasi reject bo'lsa butun promise reject. `allSettled` — hammasi tugaguncha kutadi, har biri status bilan qaytadi. `race` — birinchi tugagan natijani oladi.

Klassik gotcha: .then ichida Promise qaytarilsa, tashqi chain o'sha Promise resolve bo'lguncha avtomatik kutadi (flattening) — lekin return unutilsa, chain darhol keyingi qadamga o'tadi va natija undefined bo'lib qoladi:

fetchUser(1)
  .then((user) => {
    fetchOrders(user.id); // XATO — return yo'q, orders yo'qoladi
  })
  .then((orders) => console.log(orders)); // undefined

Shuningdek, Promise.any (ES2021) — birinchi fulfilled natijani qaytaradi, barchasi reject bo'lsa AggregateError beradi (race esa reject ham "yutishi" mumkin). catchsiz qoldirilgan reject'lar brauzerda unhandledrejection eventini keltirib chiqaradi.

Kod misoli

function fetchUser(id) {
  return fetch(`/api/users/${id}`).then((res) => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  });
}

fetchUser(1)
  .then((user) => console.log(user.name))
  .catch((err) => console.error('Xato:', err.message))
  .finally(() => console.log('So\'rov tugadi'));

// Parallel so'rovlar
const p1 = Promise.resolve(10);
const p2 = Promise.resolve(20);
Promise.all([p1, p2]).then(([a, b]) => console.log(a + b)); // 30

// Bittasi xato bo'lsa ham natijalarni ko'rish
Promise.allSettled([
  fetchUser(1),
  fetchUser(999),
]).then((results) => {
  results.forEach((r) => {
    if (r.status === 'fulfilled') console.log(r.value);
    else console.log('Reject:', r.reason.message);
  });
});

// Timeout pattern
Promise.race([
  fetch('/api/data'),
  new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Timeout')), 5000)
  ),
]);

Imtihonda

- `Promise.all` va `Promise.allSettled` qachon ishlatiladi? - Promise chain'da xato qanday uzatiladi? `catch` qayerga qo'yiladi?

Yodlash uchun

Hammasi kerak — `all`; bittasi yetarli — `race`; xato bo'lsa ham kutish — `allSettled`.

Angular HttpClient Observable qaytaradi, lekin `firstValueFrom(http.get(...))` bilan Promise'ga aylantirish mumkin.

async / await — xato boshqarish

JuniorMiddle

Nima bu?

`async` funksiya har doim Promise qaytaradi. `await` Promise resolve bo'lguncha kutadi va kod sinxron ko'rinishda yoziladi. Xatolarni `try/catch/finally` bilan ushlash mumkin. Parallel bajarish uchun `await` ni ketma-ket emas, `Promise.all` bilan bir vaqtda chaqirish kerak — aks holda sekinlashadi.

Kod misoli

async function loadDashboard(userId) {
  try {
    // Parallel — tezroq
    const [user, orders, notifications] = await Promise.all([
      fetchUser(userId),
      fetchOrders(userId),
      fetchNotifications(userId),
    ]);

    return { user, orders, notifications };
  } catch (error) {
    console.error('Dashboard yuklanmadi:', error.message);
    throw error; // yuqoriga uzatish
  } finally {
    hideSpinner();
  }
}

// Ketma-ket (sekin) — faqat ketma-ketlik kerak bo'lsa
async function loadSequential() {
  const user = await fetchUser(1);
  const orders = await fetchOrders(user.id); // user kerak
  return { user, orders };
}

// Top-level await (ES module)
// const config = await fetch('/config.json').then(r => r.json());

Imtihonda

- `async/await` va Promise chain farqi nima? Qaysi biri qachon qulay? - Loop ichida `await` ishlatilsa nima bo'ladi? Parallel qilish uchun nima qilish kerak?

Yodlash uchun

Mustaqil so'rovlar — `Promise.all`; ketma-ket bog'liqlik — ketma-ket `await`.

Angular component'da `async ngOnInit()` dan qoching — lifecycle void qaytarishi kerak; buning o'rniga subscribe yoki `toSignal(http.get(...))` ishlating.