JavaScript-и ғайрисинхронӣ

01 Синхронӣ ва ғайрисинхронӣ. setTimeout

То имрӯз тамоми коди мо синхронӣ буд: JavaScript сатрҳоро қатъиян бо тартиб, яке пас аз дигаре иҷро мекард ва сатри оянда то анҷоми сатри қаблӣ оғоз намешуд.

console.log("1. Открыли приложение");
console.log("2. Посчитали сумму");
console.log("3. Показали результат");

Аммо дар барномаҳои воқеӣ корҳое ҳастанд, ки вақт мегиранд: дархост ба сервер, боркунии расм, таймер, ҷавоби корбар. Агар ҳар якеро то анҷомаш интизор шавем, саҳифа «ях мебандад». Барои ҳамин чунин корҳоро оғоз мекунанд ва интизор намешаванд: вақте натиҷа омода шавад, JavaScript ба он бармегардад. Ин аст коди ғайрисинхронӣ.

setTimeout — «инро баъдтар иҷро кун»

Роҳи осонтарини ба даст овардани ғайрисинхронӣ — функсияи setTimeout(функсия, миллисония). Вай ба браузер мегӯяд: «баъди ин қадар миллисония ин функсияро даъват кун» ва худаш фавран бармегардад. 1000 мс = 1 сония.

console.log("Заказали плов");

setTimeout(() => {
  console.log("Плов готов!");
}, 500);

console.log("Официант идёт к другому столу");

Ба тартиб диққат диҳед: «Официант идёт…» пештар аз «Плов готов!» пайдо шуд, ҳарчанд поёнтар навишта шудааст. Функсияи дохили setTimeout-ро мо месупорем, даъват намекунем: вай баъдтар кор мекунад. Чунин функсия колбэк (callback — «баргашта занг зан») номида мешавад — дар бораи он дар қисми оянда муфассалтар.

Таъхири сифр ҳам ғайрисинхронӣ аст

Ҳайратомезтарин ҳолат: ҳатто setTimeout(…, 0) функсияро фавран иҷро намекунад. Вай онро ба навбат мегузорад — «баъд аз он ки тамоми коди ҷорӣ анҷом ёбад».

console.log("A");
setTimeout(() => console.log("B (с нулевой задержкой)"), 0);
console.log("C");

1. A — сатри оддӣ, фавран чоп мешавад.
2. setTimeout — функсия «ба як сў гузошта шуд». JavaScript минбаъд бе ақиб нигоҳ кардан мегузарад.
3. C — фавран чоп мешавад.
4. Тамоми код анҷом ёфт ва танҳо акнун JavaScript функсияи ба таъхир гузоштаро мебарорад ва B-ро чоп мекунад.

Аргументҳо ва бекор кардан

setTimeout рақам бармегардонад — рақами таймер. Бо ёрии он таймерро то кор карданаш тавассути clearTimeout бекор кардан мумкин аст.

const timerId = setTimeout(() => console.log("Это не выведется"), 300);
console.log("Таймер запущен, номер есть:", typeof timerId);

clearTimeout(timerId);
console.log("Таймер отменили");

setInterval — «ҳар N мс такрор кун»

setInterval ҳамин тавр кор мекунад, аммо функсияро борҳо ва борҳо даъват мекунад, то он даме ки онро тавассути clearInterval қатъ кунед. Агар қатъ карданро фаромӯш кунед — таймер то абад тик-так мекунад (дар ин саҳифа иҷро баъди 8 сония қатъ мешавад).

let left = 3;

const id = setInterval(() => {
  console.log("Осталось:", left);
  left--;

  if (left === 0) {
    clearInterval(id);   // қатъ мекунем, вагарна то абад тик-так мекунад
    console.log("Поехали!");
  }
}, 200);

function sayHi() {
  console.log("Салом!");
}

setTimeout(sayHi(), 1000);   // ✖ «Салом!» якбора чоп мешавад, на баъди як сония
console.log("Конец кода");

Муфассалтар хонед: learn.javascript.ru — setTimeout ва setInterval · MDN — setTimeout

console.log("Заказ принят");

// инҷо таймерро барои 500 мс оғоз кунед

console.log("Официант идёт к другому столу");

Заказ принят
Официант идёт к другому столу
Плов готов!

const actual = [];
const log = (label) => actual.push(label);

log("1");
setTimeout(() => log("2"), 100);
setTimeout(() => log("3"), 50);
log("4");

const prediction = [];   // пешгӯии шумо: тартиби нишонаҳо

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

let n = 3;

// setInterval-ро барои 100 мс оғоз кунед

3
2
1
Старт!

console.log("Начало");

setTimeout(console.log("Таймер сработал"), 200);

console.log("Конец");

Начало
Конец
Таймер сработал

02 Callback: «вақте омода шуд, занг зан»

Мо аллакай функсияҳоро ба map ва filter додаем. Функсияе, ки ба функсияи дигар «барои баъд» дода мешавад, колбэк номида мешавад. Пештар колбэкҳо фавран, дар дохили давра даъват мешуданд. Дар коди ғайрисинхронӣ бошад колбэк вақте кор анҷом ёбад даъват мешавад.

function loadPrice(dish, callback) {
  console.log("Спрашиваем цену:", dish);
  setTimeout(() => {
    const price = dish === "плов" ? 35 : 10;
    callback(price);            // бо натиҷа «занг мезанем»
  }, 300);
}

loadPrice("плов", (price) => {
  console.log("Цена плова:", price, "сомони");
});

console.log("Пока ждём ответ, можно заняться другими делами");

Колбэк бо хато: шартномаи «error-first»

Кори ғайрисинхронӣ метавонад муваффақ нашавад: шабака нест, чунин мол нест, парол нодуруст аст. Барои ҳамин аз рӯи анъана колбэк аввалин аргументро хато (ё null, агар ҳама чиз хуб бошад), дуюмро — натиҷа мегирад.

function findStudent(id, callback) {
  setTimeout(() => {
    if (id !== 1) {
      callback(new Error("студент не найден"));   // хато — аргументи аввал
      return;
    }
    callback(null, "Мадина");                      // муваффақият — хато нест
  }, 200);
}

findStudent(1, (error, name) => {
  if (error) {
    console.log("Ошибка:", error.message);
    return;
  }
  console.log("Нашли:", name);
});

findStudent(7, (error, name) => {
  if (error) {
    console.log("Ошибка:", error.message);
    return;
  }
  console.log("Нашли:", name);
});

Дӯзахи колбэкҳо (callback hell)

Агар қадамҳо аз ҳам вобаста бошанд чӣ? Аввал корбарро ёфтан, баъд фармоишҳои ӯро, баъд суроғаи расониданро. Ҳар қадами оянда бояд ба колбэки қаблӣ дохил карда шавад. «Нардбон» ҳосил мешавад, ки ба тарафи рост мегурезад.

function step(name, callback) {
  setTimeout(() => {
    console.log("Готово:", name);
    callback();
  }, 100);
}

step("нашли пользователя", () => {
  step("загрузили заказы", () => {
    step("узнали адрес", () => {
      step("посчитали доставку", () => {
        console.log("Всё готово!");
      });
    });
  });
});

Ҳамагӣ чор қадам, аммо код аллакай душвор хонда мешавад. Агар дар ҳар сатҳ коркарди хаторо илова кунем — лабиринти ҳақиқӣ ҳосил мешавад. Маҳз ҳамин мушкилотро промисҳо ҳал карданд, ки дар бораи онҳо андаке баъдтар сӯҳбат мекунем: ҳамин қадамҳо дар як занҷири ҳамвор саф мекашанд.

let price;

setTimeout(() => {
  price = 35;
}, 200);

console.log("Цена плова:", price);   // ✖ undefined — таймер ҳанӯз кор накардааст

Ҳар чизе, ки аз натиҷа вобаста аст, бояд дар дохили колбэк (ё, чунон ки минбаъд мебинем, баъд аз await) иҷро шавад.

Муфассалтар хонед: learn.javascript.ru — Муқаддима: колбэкҳо · MDN — Callback function

// function loadMenu(callback) { ... }

loadMenu((menu) => {
  console.log("Меню загружено, блюд:", menu.length);
  console.log(menu.join(", "));
});

Меню загружено, блюд: 3
самбуса, курутоб, чой

function checkAge(age, callback) {
  setTimeout(() => {
    if (age < 18) {
      callback(new Error("слишком мал"));
    } else {
      callback(null, "Добро пожаловать!");
    }
  }, 100);
}

// checkAge(20, …) ва checkAge(15, …)-ро даъват кунед

Добро пожаловать!
Ошибка: слишком мал

function takeOrder(callback) { setTimeout(() => callback("заказ принят"), 100); }
function cook(callback)      { setTimeout(() => callback("плов приготовлен"), 100); }
function serve(callback)     { setTimeout(() => callback("плов на столе"), 100); }

// занҷирро созед: takeOrder → cook → serve

заказ принят
плов приготовлен
плов на столе

03 Чӣ тавр кор мекунад: event loop

JavaScript якрешагӣ аст: вай як даст дорад ва дар як вақт як кор мекунад. Пас таймерҳо ва дархостҳо чӣ тавр «худ аз худ мераванд»? Онҳоро JavaScript не, балки браузер интизор мешавад. Вақте таймер кор кард, браузер колбэки шуморо ба навбат мегузорад, механизми махсус — event loop (давраи ҳодисаҳо) — бошад онро аз он ҷо мебарорад, вақте ки JavaScript озод шавад.

Схема

Call Stack

Стеки даъватҳо. Дар ин ҷо JavaScript кор мекунад. То даме ки дар стек код ҳаст, боқӣ ҳама интизоранд.

Макровазифа

Колбэки таймери setTimeout / setInterval, коркарди клик ва монанди инҳо. Дар як «давр» танҳо яктояш иҷро мешавад.

Микровазифа

Колбэкҳои .then / .catch / .finally, идомаи баъд аз await, queueMicrotask. Баъд аз ҳар макровазифа ҳама иҷро мешаванд, то навбат холӣ шавад.

Таҳлил қадам ба қадам

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

1. Коди синхронӣ. Ба стек console.log("1") меафтад — 1 чоп мешавад.
2. setTimeout. Таймер ба браузер супорида шуд. Баъд аз 0 мс колбэки он ба навбати макровазифаҳо мегузарад. Вай ҳоло иҷро намешавад.
3. Promise.resolve().then(…). Промис аллакай иҷро шудааст, барои ҳамин колбэки then фавран ба навбати микровазифаҳо мегузарад.
4. Коди синхронӣ. console.log("4") — 4 чоп мешавад. Стек холӣ шуд.
5. Микровазифаҳо. Event loop мебинад, ки навбати микровазифаҳо холӣ нест ва колбэкро иҷро мекунад — 3 чоп мешавад.
6. Макровазифа. Акнун навбати микровазифаҳо холӣ аст ва як макровазифаро гирифтан мумкин аст — колбэки таймер: 2 чоп мешавад.

Натиҷа: 1, 4, 3, 2. Қоидаро дар хотир доред: коди синхронӣ → микровазифаҳо (промисҳо) → макровазифаҳо (таймерҳо).

Микровазифаҳо баъд аз ҳар макровазифа медароянд

Агар дар макровазифа промис сохта шавад, колбэки он фавран баъд аз вай, ҳанӯз пеш аз макровазифаи навбатӣ аз навбат иҷро мешавад.

setTimeout(() => {
  console.log("таймер 1");
  Promise.resolve().then(() => console.log("промис внутри таймера 1"));
}, 0);

setTimeout(() => console.log("таймер 2"), 0);

Тартиб: таймери 1, промиси дохили таймери 1, таймери 2. Микровазифае, ки таймери 1 таваллуд кард, пештар аз он расид, ки «навбати оддӣ» ба таймери 2 бирасад.

Муфассалтар хонед: learn.javascript.ru — Давраи ҳодисаҳо · learn.javascript.ru — Микровазифаҳо · MDN — Event loop

const actual = [];
const log = (label) => actual.push(label);

log("A");
setTimeout(() => log("B"), 0);
log("C");

const prediction = [];   // масалан: ["A", "B", "C"]

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

const actual = [];
const log = (label) => actual.push(label);

log("1");
setTimeout(() => log("2"), 0);
Promise.resolve().then(() => log("3"));
log("4");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

const actual = [];
const log = (label) => actual.push(label);

setTimeout(() => log("таймер"), 0);
queueMicrotask(() => log("микро-1"));
Promise.resolve().then(() => log("микро-2"));
log("синхронно");

const prediction = [];   // чор нишона: синхронӣ, ду микро ва таймер

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

const actual = [];
const log = (label) => actual.push(label);

setTimeout(() => {
  log("A");
  Promise.resolve().then(() => log("B"));
}, 0);

setTimeout(() => log("C"), 0);

Promise.resolve().then(() => {
  log("D");
  setTimeout(() => log("E"), 0);
});

log("F");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

const actual = [];
const log = (label) => actual.push(label);

setTimeout(() => log("T200"), 200);
setTimeout(() => log("T0"), 0);
Promise.resolve().then(() => log("P1")).then(() => log("P2"));
setTimeout(() => log("T100"), 100);
log("S");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

04 Promise: ваъдаи натиҷа

Промис (Promise — «ваъда») — ин объектест, ки натиҷаи кори ғайрисинхрониро ифода мекунад, ки ҳоло нест, вале хоҳад буд: ё қимат, ё хато. Ба ҷои колбэкҳои дохилшуда мо объекте мегирем, ки ба он бо усулҳои then ва catch «обуна шудан» мумкин аст.

Се ҳолати промис

pending

«Интизор аст». Ҳолати ибтидоӣ: натиҷа ҳанӯз нест.

fulfilled

«Иҷро шуд». Кор бомуваффақият анҷом ёфт, промис қимат дорад. Колбэки then даъват мешавад.

rejected

«Рад шуд». Чизе хато рафт, промис сабаб (хато) дорад. Колбэки catch даъват мешавад.

Муҳим: промис аз pending ба ҳолати дигар як маротиба ва ба таври абадӣ мегузарад. Промиси иҷрошударо баъдтар «рад кардан» мумкин нест.

Сохтани промис

Промисро тавассути new Promise месозанд. Ба конструктор функсия бо ду параметр дода мешавад: resolve (ҳангоми муваффақият даъват мешавад) ва reject (ҳангоми хато даъват мешавад).

const orderPlov = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Плов готов!");     // муваффақият: қиматро мемонем
  }, 300);
});

orderPlov.then((result) => {
  console.log("Получили:", result);
});

console.log("Промис создан, ждём…");

function buyTicket(balance) {
  return new Promise((resolve, reject) => {
    if (balance >= 3) {
      resolve("Билет куплен");
    } else {
      reject(new Error("Недостаточно сомони"));
    }
  });
}

buyTicket(10)
  .then((text) => console.log(text))
  .catch((error) => console.log("Ошибка:", error.message));

buyTicket(1)
  .then((text) => console.log(text))
  .catch((error) => console.log("Ошибка:", error.message));

then, catch, finally

• .then(onSuccess) — вақте иҷро мешавад, ки промис иҷро шуда бошад;
• .catch(onError) — вақте иҷро мешавад, ки промис рад шуда бошад (ё дар ягон ҷои боло дар занҷир хато рух дода бошад);
• .finally(fn) — дар ҳар сурат иҷро мешавад: барои баъд аз кор «ҷамъ кардан» (нишондиҳандаи боркуниро нест кардан).

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

console.log("Показываем «Загрузка...»");

wait(300)
  .then(() => console.log("Данные пришли"))
  .catch(() => console.log("Ошибка"))
  .finally(() => console.log("Прячем «Загрузка...»"));

Функсияи wait дар ин ҷо — омодаи судманд аст. Вай промисе бармегардонад, ки баъд аз вақти додашуда иҷро мешавад. Мо онро дар дарс пайваста истифода мебарем.

Занҷираҳои промисҳо

Қуввати асосии промисҳо: then промиси нав бармегардонад. Барои ҳамин then-ҳоро ба занҷир пайваст кардан мумкин аст, қимате ки як then баргардонд, ба оянда мерасад.

Promise.resolve(5)
  .then((n) => {
    console.log("Получили:", n);
    return n * 2;               // ин қимат минбаъд меравад
  })
  .then((n) => {
    console.log("Удвоили:", n);
    return n + 1;
  })
  .then((n) => {
    console.log("Прибавили 1:", n);
  });

Агар колбэки then промис баргардонад, занҷир анҷоми онро интизор мешавад ва танҳо баъд минбаъд меравад. Ба ин тартиб қадамҳои пайдарпай сохта мешаванд ва пирамидаи колбэкҳо аз қисми гузашта ба сутуни ҳамвор табдил меёбад:

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function step(name) {
  return wait(100).then(() => console.log("Готово:", name));
}

step("нашли пользователя")
  .then(() => step("загрузили заказы"))
  .then(() => step("узнали адрес"))
  .then(() => step("посчитали доставку"))
  .then(() => console.log("Всё готово!"));

Хатоҳо дар занҷир

Агар дар ягон ҳалқа хато рух диҳад (reject ё throw), занҷир ҳамаи then-ҳои баъдиро мепарронад ва ба наздиктарин catch «меафтад». Як catch дар охир хатоҳои ҳамаи қадамҳоро дастгир мекунад. Агар catch қимат баргардонад — занҷир боз муваффақ ҳисоб мешавад ва минбаъд меравад.

Promise.resolve("шаг 1")
  .then((v) => {
    console.log(v, "выполнен");
    throw new Error("шаг 2 сломался");
  })
  .then(() => console.log("этот then пропущен"))
  .catch((error) => {
    console.log("Поймали:", error.message);
    return "запасной вариант";
  })
  .then((v) => console.log("Цепочка продолжилась:", v));

Promise.resolve(100)
  .then((price) => {
    price * 2;                      // ✖ ҳисоб кардем, аммо барнагардондем
  })
  .then((result) => {
    console.log("Результат:", result);   // → undefined
  });

Якчанд промис якбора

Мешавад, ки якчанд чизи новобастаро бор кардан лозим мешавад. Агар онҳоро ба навбат интизор шавем — вақт гум мекунем. Беҳтар аст ҳамаро якбора оғоз кунем.

• Promise.all([…]) — ҳама-ро интизор мешавад. Массиви натиҷаҳоро бо ҳамон тартиб, ки дар дархост буд, бармегардонад. Агар ақаллан як промис рад шавад — пурра рад мешавад;
• Promise.allSettled([…]) — ҳамаро интизор мешавад ва ҳаргиз рад намешавад: барои ҳар кадом status ("fulfilled" ё "rejected") ва value / reason-ро хабар медиҳад;
• Promise.race([…]) — натиҷа (ё хатои) аз ҳама тез-ро.

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

Promise.all([
  wait(300, "курсы валют"),
  wait(100, "погода"),
  wait(200, "новости"),
]).then((results) => {
  console.log("Всё загружено:", results.join(", "));   // тартиб мисли дархост
});

Promise.race([wait(300, "медленный"), wait(100, "быстрый")])
  .then((winner) => console.log("Первым пришёл:", winner));

Муфассалтар хонед: learn.javascript.ru — Промисҳо · learn.javascript.ru — Занҷири промисҳо · MDN — Promise

// const loading = new Promise(...)

// loading.then(...)

Данные загружены

function checkAdult(age) {
  return new Promise((resolve, reject) => {
    if (age >= 18) {
      resolve("доступ разрешён");
    } else {
      reject(new Error("доступ закрыт"));
    }
  });
}

// checkAdult(15) ...

Ошибка: доступ закрыт
проверка завершена

const price = 1000;

// Promise.resolve(price)...

После скидки: 900
С купоном: 850

Promise.resolve(100)
  .then((price) => {
    const total = price + 20;
  })
  .then((total) => {
    console.log("Итого: " + total);
  });

Итого: 120

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

const loadProfile = () => wait(300, "профиль");
const loadOrders  = () => wait(100, "заказы");
const loadBanners = () => wait(200, "баннеры");

// Promise.all([...]).then(...)

Загружено: профиль, заказы, баннеры

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) => new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.allSettled([
  wait(100, "курс"),
  fail(150, "нет сети"),
  wait(50, "расписание"),
]).then((results) => {
  // барои ҳар натиҷа як сатр чоп кунед
});

✓ курс
✗ нет сети
✓ расписание

const actual = [];
const log = (label) => actual.push(label);

Promise.resolve("a")
  .then((v) => {
    log(v);
    throw new Error("сбой");
  })
  .then(() => log("b"))
  .catch(() => {
    log("c");
    return "d";
  })
  .then((v) => log(v))
  .finally(() => log("e"));

log("f");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

05 async / await: промисҳо бе занҷирҳо

Занҷирҳои then аз пирамида беҳтаранд, аммо боз ҳам мисли коди оддӣ хонда намешаванд. Дар JavaScript синтаксисе ҳаст, ки коди ғайрисинхрониро ба синхронӣ монанд мекунад: async / await. Дар зери сарпӯш ин ҳамон промисҳост, фақат бароҳаттар навишта шудаанд.

async

Калима пеш аз функсия. Чунин функсия ҳамеша промис бармегардонад ва дар дохили он await-ро истифода бурдан мумкин аст.

await

«Натиҷаи промисро интизор шав». Танҳо дар дохили функсияи async кор мекунад. Ҳамин функсияро боздошта мемонад, на тамоми барномаро.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

// буд: занҷири then
function checkoutThen() {
  return wait(100)
    .then(() => console.log("then: корзина открыта"))
    .then(() => wait(100))
    .then(() => console.log("then: оплата прошла"));
}

// шуд: async / await
async function checkout() {
  await wait(100);
  console.log("await: корзина открыта");
  await wait(100);
  console.log("await: оплата прошла");
}

checkoutThen().then(() => checkout());

Коди бо await аз боло ба поён мисли синхронии оддӣ хонда мешавад: «интизор шудем, чоп кардем, интизор шудем, чоп кардем». Натиҷаи промисро оддӣ ба тағйирёбанда гузоштан мумкин аст:

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function showPrice() {
  console.log("Спрашиваем цену...");
  const price = await wait(200, 35);      // await қиматро аз промис «мебарорад»
  console.log("Цена плова:", price, "сомони");
  return price * 2;
}

showPrice().then((double) => console.log("Две порции:", double));
console.log("showPrice() запущена и вернула промис");

Хатоҳо: try / catch / finally

Агар промис рад шавад, await дар ҳамон ҷое, ки шумо интизор будед, хато мепартояд. Онро бо try / catch-и маъмулӣ, ки аллакай медонед, дастгир мекунем. finally дар ҳар сурат иҷро мешавад.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function loadStudent(id) {
  await wait(100);
  if (id <= 0) {
    throw new Error("неверный номер студента");
  }
  return "Студент №" + id;
}

async function main() {
  try {
    console.log(await loadStudent(5));
    console.log(await loadStudent(0));      // инҷо хато мешавад
    console.log("эта строка не выполнится");
  } catch (error) {
    console.log("Ошибка:", error.message);
  } finally {
    console.log("Загрузка завершена");
  }
}

main();

Пай дар пай ё мувозӣ

Ҳар await интизор мешавад, то қадами қаблӣ анҷом ёбад. Агар қадамҳо новобаста бошанд — ин талафи вақт аст: ду боркунии 200 мс-а пай дар пай 400 мс мегиранд. Ҳарду промисро якбора оғоз кунед ва онҳоро якҷоя тавассути Promise.all интизор шавед — 200 мс мешавад.

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function sequential() {
  console.log("--- последовательно ---");
  const a = await wait(200, "курсы");        // 200 мс интизор мешавем
  const b = await wait(200, "новости");      // баъд боз 200 мс
  console.log("получили:", a, b);
}

async function parallel() {
  console.log("--- параллельно ---");
  const [a, b] = await Promise.all([wait(200, "курсы"), wait(200, "новости")]);   // 200 мс якҷоя
  console.log("получили:", a, b);
}

sequential().then(parallel);

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

async function main() {
  const price = wait(100, 35);         // ✖ бе await
  console.log("Цена:", price);          // → Цена: Promise {…}, на 35
}

main();

await ва event loop

Ҳар чизе, ки баъд аз await меояд — идомаи функсия дар намуди микровазифа аст. Коди то аввалин await ба таври синхронӣ иҷро мешавад, боқимонда бошад ба навбати микровазифаҳо «меистад»:

async function main() {
  console.log("1. до await (синхронно)");
  await null;
  console.log("3. после await (микрозадача)");
}

main();
console.log("2. после вызова main() (синхронно)");

Муфассалтар хонед: learn.javascript.ru — Async/await · MDN — Истифодаи промисҳо

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function checkoutOld() {
  return wait(100)
    .then(() => { console.log("Шаг 1: открыли корзину"); return wait(100); })
    .then(() => { console.log("Шаг 2: выбрали доставку"); return wait(100); })
    .then(() => console.log("Шаг 3: оплатили"));
}

// async function checkout() { ... }

Шаг 1: открыли корзину
Шаг 2: выбрали доставку
Шаг 3: оплатили

const actual = [];
const log = (label) => actual.push(label);

async function main() {
  log("1");
  await null;
  log("2");
}

log("0");
main();
log("3");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function fetchStudent(id) {
  await wait(50);
  if (id === 0) {
    throw new Error("студент не найден");
  }
  return "Студент №" + id;
}

// async function main() { ... }
// main();

Студент №1
— запрос завершён
Ошибка: студент не найден
— запрос завершён
Студент №2
— запрос завершён

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function load(name, ms) {
  console.log("старт " + name);
  await wait(ms);
  console.log("готов " + name);
  return name;
}

async function main() {
  const a = await load("курсы", 200);
  const b = await load("новости", 100);
  console.log("итого: " + a + " + " + b);
}

main();

старт курсы
старт новости
готов новости
готов курсы
итого: курсы + новости

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

let calls = 0;
async function flaky() {
  calls++;
  await wait(50);
  if (calls < 3) {
    throw new Error("сбой " + calls);
  }
  return "данные";
}

// async function retry(fn, times) { ... }

retry(flaky, 5).then((result) => console.log("успех: " + result));

попытка 1: сбой 1
попытка 2: сбой 2
успех: данные

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));

// function withTimeout(promise, ms) { ... }

async function test(label, delay) {
  try {
    console.log(await withTimeout(wait(delay, "ответ " + label), 150));
  } catch (error) {
    console.log("Ошибка: " + error.message);
  }
}

test("быстрый", 50).then(() => test("медленный", 400));

ответ быстрый
Ошибка: таймаут

const actual = [];
const log = (label) => actual.push(label);

async function a() {
  log("a1");
  await b();
  log("a2");
}

async function b() {
  log("b1");
}

setTimeout(() => log("t"), 0);
a();
Promise.resolve().then(() => log("p"));
log("s");

const prediction = [];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === prediction.join(" ") ? "Верно!" : "Не угадали, подумайте ещё"), 400);

Верно!

06 Блоки ЗС: event loop-ро шарҳ медиҳем ва бо код месанҷем

Ғайрисинхронӣ — яке аз мавзӯъҳоест, ки ЗС (зеҳни сунъӣ) онро зебо шарҳ медиҳад, аммо баъзан дар ҷузъиёт хато мекунад: тартиби микровазифаҳо ва таймерҳоро омехта мекунад ё дар бораи await «фаромӯш мекунад». Имрӯз малакаи асосии кор бо ЗС-ро машқ мекунем: бовар накардан ба гап, балки бо иҷро санҷидан.

Чӣ тавр пурсидан: бад ва хуб

Формулаи промпти курс: контекст → вазифа → маҳдудиятҳо → формати ҷавоб → санҷиш.

Промпти хубро ба чати ЗС нусха кунед. Баъд шарҳро бо код санҷед:

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// Оё тартиб бо ҷавоби ЗС мувофиқат кард? Агар не, пас ЗС хато кардааст — ё шумо вазифаро нодуруст тавсиф кардаед.

const actual = [];
const log = (label) => actual.push(label);

log("начало");
setTimeout(() => log("таймер"), 0);
Promise.resolve().then(() => log("промис"));
log("конец");

// ҷавоби ЗС — дар он хато ҳаст, ислоҳ кунед
const aiAnswer = ["начало", "таймер", "промис", "конец"];

// --- санҷиш, тағйир надиҳед ---
setTimeout(() => console.log(actual.join(" ") === aiAnswer.join(" ") ? "Верно!" : "ИИ ошибся, исправьте ответ"), 400);

Верно!

07 Амал дар дарс: тақлиди боркунии маълумот

Серверҳои воқеӣ ҳоло надорем (ба онҳо дар дарси оянда мерасем), барои ҳамин сервери «қалбакӣ» месозем — функсияҳое, ки мисли дархостҳои воқеӣ бо таъхир ҷавоб медиҳанд. Ин усули стандартӣ аст: бо ин роҳ интерфейсро то омода шудани сервер месанҷанд.

Қадами 1. Базаи маълумот ва функсияҳои ёрирасон

Аввал «базаи» мо ва функсияи wait. Иҷро кунед — ҳоло чизе чоп намешавад, мо танҳо мавод омода мекунем.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const users = {
  1: { name: "Мадина" },
  2: { name: "Фарход" },
};

const orders = {
  1: [120, 80, 45],   // маблағи фармоишҳо бо сомонӣ
  2: [],
};

console.log("Готово. Пользователей:", Object.keys(users).length);

Қадами 2. Функсияҳои «дархостҳо»

Ҳар функсия интизор мешавад ва маълумот бармегардонад. Агар корбар набошад — промисро бо хато рад мекунад. Сервери воқеӣ ҳамин тавр рафтор мекунад: аксар вақт вай дар 100–500 мс ҷавоб медиҳад ва гоҳо «хато» мегӯяд.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const users = { 1: { name: "Мадина" }, 2: { name: "Фарход" } };
const orders = { 1: [120, 80, 45], 2: [] };

async function fakeFetchUser(id) {
  await wait(200);
  const user = users[id];
  if (!user) {
    throw new Error("пользователь не найден");
  }
  return user;
}

async function fakeFetchOrders(id) {
  await wait(150);
  return orders[id] ?? [];
}

fakeFetchUser(1).then((user) => console.log("Получили:", user.name));
fakeFetchUser(99).catch((error) => console.log("Ошибка:", error.message));

Қадами 3. Занҷир: корбар → фармоишҳои ӯ

Фармоишҳо аз корбар вобастаанд, барои ҳамин ба навбат интизор мешавем. Тавассути async/await ин мисли дастур хонда мешавад:

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const users = { 1: { name: "Мадина" }, 2: { name: "Фарход" } };
const orders = { 1: [120, 80, 45], 2: [] };

async function fakeFetchUser(id) {
  await wait(200);
  if (!users[id]) throw new Error("пользователь не найден");
  return users[id];
}
async function fakeFetchOrders(id) {
  await wait(150);
  return orders[id] ?? [];
}

async function showProfile(id) {
  const user = await fakeFetchUser(id);
  const list = await fakeFetchOrders(id);
  const sum = list.reduce((total, price) => total + price, 0);
  console.log(`${user.name}: заказов ${list.length}, на ${sum} сомони`);
}

showProfile(1);

Қадами 4. Инро дар саҳифа нишон медиҳем

Дар браузер мо одатан ба корбар се ҳолатро нишон медиҳем: «Боркунӣ…», маълумот ё хато. Дар барномаи хурди поён «Загрузить»-ро пахш кунед, баъд ҷадвали script.js-ро кушоед ва рақами корбарро ба 99 иваз кунед — ҳолати хаторо мебинед. Ба ин усул мо дар дарси 17 бармегардем.

<div class="card">
  <button id="load">Загрузить профиль</button>
  <p id="status">Нажмите кнопку</p>
</div>

.card { max-width: 320px; padding: 16px; border: 1px solid #ccd; border-radius: 12px; }
button { padding: 8px 14px; border-radius: 8px; border: 0; background: #1a8a6a; color: #fff; font-size: 15px; cursor: pointer; }
#status { margin: 12px 0 0; }
.error { color: #c0392b; }

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const users = { 1: { name: "Мадина" }, 2: { name: "Фарход" } };

async function fakeFetchUser(id) {
  await wait(600);
  if (!users[id]) throw new Error("пользователь не найден");
  return users[id];
}

const button = document.querySelector("#load");
const status = document.querySelector("#status");

button.addEventListener("click", async () => {
  status.className = "";
  status.textContent = "Загрузка...";
  button.disabled = true;
  try {
    const user = await fakeFetchUser(1);        // ба 99 иваз кунед
    status.textContent = "Привет, " + user.name + "!";
  } catch (error) {
    status.className = "error";
    status.textContent = "Ошибка: " + error.message;
  } finally {
    button.disabled = false;
  }
  console.log("статус:", status.textContent);
});

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const users = { 1: { name: "Мадина" }, 2: { name: "Фарход" } };
const orders = { 1: [120, 80, 45], 2: [] };

async function fakeFetchUser(id) {
  await wait(200);
  if (!users[id]) throw new Error("пользователь не найден");
  return users[id];
}
async function fakeFetchOrders(id) {
  await wait(150);
  return orders[id] ?? [];
}

// async function loadDashboard(id) { ... }

loadDashboard(1);

Загрузка...
Привет, Мадина! Заказов: 3, на сумму 245 сомони

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const users = { 1: { name: "Мадина" }, 2: { name: "Фарход" } };
const orders = { 1: [120, 80, 45], 2: [] };

async function fakeFetchUser(id) {
  await wait(200);
  if (!users[id]) throw new Error("пользователь не найден");
  return users[id];
}
async function fakeFetchOrders(id) {
  await wait(150);
  return orders[id] ?? [];
}

// async function loadDashboard(id) { ... }

// барои 1 иҷро кунед, вақте анҷом ёфт — барои 99

Загрузка...
Привет, Мадина! Заказов: 3, на сумму 245 сомони
Загрузка завершена
Загрузка...
Ошибка: пользователь не найден
Загрузка завершена

08 Вазифаи хонагӣ

Шаш вазифа дар мавзӯи промисҳо ва async/await. Ҳамаи ҳалҳо — дар як файли async-basics.js. Пеш аз ҳар ҳал шарҳе бо рақами вазифа гузоред.

1. Таймер бо промисҳо. Функсияи delay(ms)-ро нависед, ки промисе бармегардонад, ки баъд аз ms миллисония иҷро мешавад. Бо ёрии он «3», «2», «1», «Старт!»-ро бо танаффуси 300 мс байни сатрҳо (тавассути занҷири then) чоп кунед.
2. Аз колбэк ба промис. Функсияи checkAge(age, callback)-ро аз вазифаи 2.2 гиред ва печонандаи checkAgeAsync(age)-ро нависед, ки промис бармегардонад. Онро барои ду синну сол даъват кунед, натиҷаро тавассути then / catch коркард намоед.
3. Занҷири се қадам. Се қадами «фармоиши питса» бо таъхир: фармоишро қабул кардан → тайёр кардан → расондан. Ҳар кадом промис бо сатр бармегардонад. Онҳоро ба занҷири ҳамвор саф кашед ва натиҷаи ҳар қадамро чоп кунед. Дар охир як catch илова кунед ва санҷед, ки он кор мекунад, агар як қадамро маҷбур кунед, ки рад шавад.
4. Се боркунӣ якбора. Се «дархост» бо таъхири гуногун (қурби сомонӣ, обу ҳаво дар Душанбе, ҷадвали гурӯҳ). Тавассути Promise.all оғоз кунед, натиҷаҳо ва вақти умумиро чоп намоед (Date.now() то ва баъд — вай бояд тақрибан ба дарозтарин таъхир баробар бошад, на ба маҷмӯъ).
5. async / await бо хато. async function loadProfile(id)-ро нависед, ки профилро 300 мс «бор мекунад» ва барои рақами калонтар аз 100 хато мепартояд. Онро барои се рақам даъват кунед, хатоҳоро тавассути try / catch / finally дастгир намоед.
6. Варақаи пешгӯиҳо. Се порчаи кодии худатонро бо омехтаи console.log, setTimeout ва Promise.then ихтироъ кунед. Болои ҳар кадом пешгӯии тартиби чопи худро ҳамчун шарҳ нависед, баъд иҷро кунед ва муқоиса намоед. Агар дуруст пешгӯӣ накардед — дар як сатр шарҳ диҳед, ки хато дар чӣ буд.

Чӣ супоридан лозим

• Файли async-basics.js бо ҳамаи шаш ҳал ва шарҳҳо.
• Истинод ба репозиторий дар GitHub (ё худи файл — чунон ки бо муаллим мувофиқа кунед).

Чӣ тавр баҳо медиҳем (0–10)