Этап 5 из 19 · ≈ 8 ч

Асинхронность и event loop

Основа с Junior

Как однопоточный JavaScript делает много дел сразу — стек вызовов, очереди задач, промисы и async/await.

Код выполняется в одном потоке. Долгие операции (сеть, таймеры) идут вне его, а их колбэки ставятся в очереди. Event loop: выполнить задачу из стека → выполнить все микрозадачи (промисы, queueMicrotask) → отрисовать кадр при необходимости → взять следующую макрозадачу (таймер, событие, сообщение).

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
console.log(4);
// 1 4 3 2

Что важно знать

  • Промис: pending → fulfilled или rejected, один раз. then возвращает новый промис — отсюда цепочки.
  • Promise.all падает на первой ошибке, allSettled ждёт всех, race — первый завершившийся, any — первый успешный.
  • async/await — синтаксис над промисами; ошибки ловят try/catch.
  • Последовательные await в цикле там, где запросы независимы, — частая потеря скорости; параллельно — Promise.all.
  • Долгий синхронный код блокирует интерфейс: его дробят или выносят в Web Worker.
  • Отмена запросов — AbortController.

Критерии освоения

Junior ≈ 8 ч

  • Объясняет event loop, микро- и макрозадачи и предсказывает порядок вывода
  • Пишет асинхронный код на async/await с обработкой ошибок

Практика. Решить 15 задач на порядок вывода с промисами и таймерами и переписать код на колбэках на async/await.

Middle ≈ 6 ч

  • Выбирает между Promise.all, allSettled, race и any и запускает независимые запросы параллельно
  • Отменяет запросы через AbortController и защищается от гонок ответов
  • Реализует Promise.all вручную

Практика. Реализовать Promise.all и функцию запросов с ограничением параллельности и повторами.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как работает event loop в JavaScript — макрозадачи и микрозадачи?Junior

JavaScript выполняется в одном потоке. Цикл событий берёт одну макрозадачу (скрипт, setTimeout, событие, сетевой ответ), выполняет её до конца, затем все микрозадачи (then у промисов, await-продолжения, queueMicrotask), затем при необходимости отрисовку, и…

Полный разбор
Что такое Promise и чем отличаются Promise.all, allSettled, race и any?Junior

Promise — объект будущего результата в одном из состояний: pending, fulfilled, rejected; состояние меняется один раз. then/catch/finally возвращают новый промис — получаются цепочки. all — все успешны или первая ошибка; allSettled — дождаться всех и получить…

Полный разбор
Как работают async и await и как правильно обрабатывать в них ошибки?Junior

async-функция всегда возвращает Promise; await приостанавливает её до завершения промиса, не блокируя поток (продолжение — микрозадача). Ошибки ловят обычным try/catch. Независимые запросы запускают одновременно: сначала создать промисы, потом await…

Полный разбор
Чем debounce отличается от throttle?Junior

Debounce — вызвать функцию, только когда события прекратились на N мс: поиск по вводу, сохранение черновика, resize. Throttle — вызывать не чаще раза в N мс, пока события идут: прокрутка, движение мыши, отслеживание позиции.

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования