Асинхронный 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)