Что такое await

await помогает писать асинхронный код линейно. Вы ставите его перед Promise. Продолжение текущей async-функции ставится на паузу. Когда Promise завершается, код идет дальше со следующей строки.

async function loadUser() {
  const response = await fetch("/api/user");
  const user = await response.json();
  return user;
}

Важно сказать точно: паузится не весь браузер и не весь JavaScript. Паузится продолжение этой функции. Поэтому пользователь может кликать, другие обработчики могут выполняться. А тяжелый синхронный цикл все равно заблокирует интерфейс, даже если рядом есть await.

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

async function loadSettings() {
  try {
    const response = await fetch("/api/settings");

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

    return await response.json();
  } catch (error) {
    showError("Не удалось загрузить настройки");
    throw error;
  }
}

Практический вывод для фронтенда простой. После ошибки мало залогировать проблему. Нужно вернуть UI из состояния загрузки, показать понятное сообщение и не использовать неполные данные как успешные.

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

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

async function loadPage() {
  const profile = await fetch("/api/profile").then((r) => r.json());
  const settings = await fetch("/api/settings").then((r) => r.json());

  return { profile, settings };
}

Здесь второй запрос стартует только после первого. Если каждый отвечает по 500 мс, пользователь может ждать около секунды вместо половины секунды.

Более безопасный вариант:

async function loadPage() {
  const [profileResponse, settingsResponse] = await Promise.all([
    fetch("/api/profile"),
    fetch("/api/settings"),
  ]);

  if (!profileResponse.ok || !settingsResponse.ok) {
    throw new Error("Не удалось загрузить данные страницы");
  }

  const [profile, settings] = await Promise.all([
    profileResponse.json(),
    settingsResponse.json(),
  ]);

  return { profile, settings };
}

Здесь запросы стартуют одновременно. Но помните про trade-off: Promise.all отклонится при первой ошибке. Если нужно показать частичные данные, рассмотрите Promise.allSettled. Потом отдельно решите, что делать с упавшими частями.

Частая ловушка с fetch: await дождался ответа, но это еще не значит, что ответ успешен для приложения. HTTP 404 или 500 обычно не отправят код в catch. Вы получите Response и должны сами проверить response.ok.

Еще одна ловушка связана с возвращаемым значением. async-функция всегда возвращает Promise. Даже если внутри написано return 42, снаружи это будет Promise, который resolved со значением 42. Поэтому вызывающий код тоже должен использовать await, .then или передать Promise дальше осознанно.

await не отменяет запрос и не гарантирует, что результат все еще нужен текущему экрану. Плохой вариант часто выглядит безопасно, потому что код читается сверху вниз:

useEffect(() => {
  async function loadUser() {
    setLoading(true);
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();

    setUser(data);
    setLoading(false);
  }

  loadUser();
}, [userId]);

Что сломается: если userId изменится быстро, старый запрос может завершиться позже нового и перезаписать карточку пользователя. Если компонент уже ушел с экрана, результат больше не нужен, но код все равно пытается менять состояние. Еще здесь нет обработки error. Поэтому UI может навсегда остаться в loading.

Безопаснее привязать запрос к жизненному циклу эффекта:

useEffect(() => {
  const controller = new AbortController();
  let active = true;

  async function loadUser() {
    setLoading(true);
    setError(null);

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

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

      const data = await response.json();

      if (active) {
        setUser(data);
      }
    } catch (error) {
      if (error.name === "AbortError") {
        return;
      }

      if (active) {
        setError("Не удалось загрузить пользователя");
      }
    } finally {
      if (active) {
        setLoading(false);
      }
    }
  }

  loadUser();

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

На интервью не обязательно писать весь код. Достаточно сказать: в UI вы думаете не только про await, но и про отмену запроса, устаревший ответ, loading, error и cleanup.