Что такое async/await в JavaScript

async/await помогает писать асинхронный код как понятную последовательность действий. Он не заменяет промисы, а работает поверх них.

async меняет контракт функции. Такая функция всегда возвращает Promise. Если вы возвращаете строку, число или объект, вызывающий код все равно получит Promise. Этот Promise зарезолвится вашим значением.

await можно использовать внутри async-функции. Он ждет промис, thenable или обычное значение и возвращает успешный результат. Если промис отклонится, в месте await появится ошибка. Ее можно поймать через try/catch.

Короткий пример для ответа на интервью:

async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);

  if (!response.ok) {
    throw new Error(`User request failed: ${response.status}`);
  }

  return response.json();
}

async function showUser() {
  try {
    const user = await getUser(42);
    console.log(user.name);
  } catch (error) {
    console.error("Не удалось загрузить пользователя", error);
  }
}

Здесь getUser возвращает Promise с пользователем. await fetch ждет сетевой ответ. Проверка response.ok нужна отдельно, потому что HTTP-ошибка не всегда означает rejected Promise.

Удобная формулировка для интервью: await ставит паузу в текущей async-функции, но не замораживает весь JavaScript. Остальной код может продолжать выполняться. Браузер может обрабатывать события. Продолжение async-функции выполнится позже.

Это важно для понимания порядка выполнения:

async function run() {
  console.log("1");
  await Promise.resolve();
  console.log("3");
}

run();
console.log("2");

В консоли будет 1, потом 2, потом 3. Продолжение после await откладывается, даже если промис уже выполнен. Этот пример показывает, что вы понимаете связь async/await с event loop и микрозадачами.

Частая практическая ловушка в том, что async/await делает код линейным, но не ускоряет его автоматически. Если написать несколько await подряд, операции будут ждать друг друга.

Плохой вариант для независимых запросов:

async function loadDashboard() {
  const user = await fetchUser();
  const settings = await fetchSettings();
  const notifications = await fetchNotifications();

  return { user, settings, notifications };
}

Если эти запросы не зависят друг от друга, экран загрузится медленнее. Лучше запустить их сразу:

async function loadDashboard() {
  const [user, settings, notifications] = await Promise.all([
    fetchUser(),
    fetchSettings(),
    fetchNotifications(),
  ]);

  return { user, settings, notifications };
}

Но последовательный await не всегда ошибка. Он нужен, когда второй шаг использует результат первого. Например, сначала создать заказ, а потом оплатить именно этот заказ.

В ответе разделите два типа ошибок. Rejected Promise из await можно поймать через try/catch. HTTP-статусы у fetch нужно проверять отдельно.

async function loadProducts(signal) {
  const response = await fetch("/api/products", { signal });

  if (!response.ok) {
    throw new Error(`Products request failed: ${response.status}`);
  }

  return response.json();
}

Если не проверить response.ok, можно распарсить тело ошибки как обычные данные или показать пользователю пустой список вместо понятного сообщения. На интервью это звучит сильнее, чем просто сказать, что вы оборачиваете запрос в try/catch.

В компонентах важен не только синтаксис, но и жизненный цикл. Запрос может завершиться после размонтирования компонента. Еще он может завершиться после того, как пользователь уже выбрал другой фильтр. Тогда старый результат перезапишет новый.

Пример безопаснее делать с отменой:

import { useEffect, useState } from "react";

function UserCard({ userId }) {
  const [state, setState] = useState({
    status: "loading",
    user: null,
    error: null,
    requestedId: userId,
  });

  useEffect(() => {
    const controller = new AbortController();

    async function loadUser() {
      try {
        setState({
          status: "loading",
          user: null,
          error: null,
          requestedId: userId,
        });

        const response = await fetch(`/api/users/${userId}`, {
          signal: controller.signal,
        });

        if (!response.ok) {
          throw new Error(`Request failed: ${response.status}`);
        }

        const nextUser = await response.json();
        setState({
          status: "success",
          user: nextUser,
          error: null,
          requestedId: userId,
        });
      } catch (error) {
        if (error.name !== "AbortError") {
          setState({
            status: "error",
            user: null,
            error,
            requestedId: userId,
          });
        }
      }
    }

    loadUser();

    return () => controller.abort();
  }, [userId]);

  if (state.requestedId !== userId || state.status === "loading") {
    return <p>Загрузка...</p>;
  }

  if (state.status === "error") {
    return <p>Не удалось загрузить пользователя</p>;
  }

  if (!state.user) {
    return <p>Пользователь не найден</p>;
  }

  return <p>{state.user.name}</p>;
}

Этот пример показывает практический вывод. async/await помогает читать код, но не отменяет правила UI. Без статуса загрузки экран может показывать старого пользователя при смене userId. Без отмены старый запрос может перезаписать новый результат. Поэтому обрабатывайте загрузку, ошибку, пустое состояние, отмену и устаревший результат.

Хороший короткий ответ может звучать так:

async/await это синтаксис для работы с Promise. async-функция всегда возвращает Promise, а await внутри нее ждет результат промиса и позволяет писать код как последовательность шагов. При rejected Promise ошибка попадает в try/catch, но await не блокирует весь браузер. В практическом коде я слежу за тем, какие операции должны идти последовательно, какие можно запускать через Promise.all, и отдельно обрабатываю HTTP-статусы, отмену запроса и состояние UI.

Такой ответ закрывает базу и показывает практический опыт. Вы не просто знаете синтаксис. Вы понимаете, где async/await может создать медленный запрос, неотловленную ошибку или race condition.