Вопрос с собеседования · Frontend

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

JuniorАсинхронность и event loop
Ещё спрашивают так:
  • Как выполнить несколько запросов параллельно с await?
Коротко

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

  • await в цикле for — последовательно; для параллельности — map + Promise.all
  • forEach с async-колбэком не ждёт завершения
  • Забытый await — функция идёт дальше, а ошибка уходит в unhandledrejection

А ещё Top-level await доступен в ES-модулях

Попробуйте сами

Event loop: стек, микро- и макрозадачи

Подробно

Что делает await. Если значение — промис, функция приостанавливается, а продолжение ставится в очередь микрозадач после его завершения. Поток при этом свободен для других задач.

fetch не бросает на HTTP-ошибки — 404 и 500 приходят как успешный ответ, проверять res.ok. Бросает только при сетевой ошибке и отмене.

Циклы: for...of с await — последовательная обработка (иногда нужна, чтобы не перегрузить сервер); forEach(async ...) — запускает всё и не ждёт; для ограниченного параллелизма — пачки или библиотека p-limit.

Отмена: AbortController и signal в fetch; при размонтировании компонента отменять незавершённые запросы.

Пример

// медленно: запросы по очереди
const user = await fetchUser(id);
const orders = await fetchOrders(id);

// быстро: одновременно
const [user2, orders2] = await Promise.all([fetchUser(id), fetchOrders(id)]);

async function load() {
  try {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (e) {
    showError(e);
  }
}

Что хотят услышать

  • Связь async/await с промисами.
  • try/catch и проверка res.ok.
  • Последовательные и параллельные запросы.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Возвращает Promise; await приостанавливает функцию, не блокируя поток; ошибки — try/catch
  • ✗await блокирует весь поток браузера до ответа, поэтому независимые запросы идут по очереди
  • ✗async-функция возвращает обычное значение, а Promise создаётся только при наличии await
  • ✗Ошибки в async-функции поймать нельзя, только через window.onerror

Связанные вопросы

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

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

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

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