Что такое асинхронность

Асинхронность отвечает на простой вопрос: что делать, если операция завершится не сразу. Например, запрос к серверу может занять 50 мс, а может 5 секунд. Если бы JavaScript ждал его синхронно в основном потоке, страница не реагировала бы на клики, ввод и прокрутку.

Поэтому долгую операцию запускают, а продолжение откладывают до момента, когда появится результат. JavaScript не ждет внутри call stack. Он может выполнить другой код, обработать событие пользователя и позже вернуться к callback, .then() или продолжению после await.

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

Асинхронность позволяет выполнять операции, результат которых появится позже, не блокируя основной поток ожиданием. В JavaScript это обычно callbacks, Promise и async/await. При этом асинхронность не равна параллельному выполнению всего кода, поэтому для UI важны обработка ошибок, отмена и порядок ответов.

В JavaScript есть call stack. В нем выполняется текущий синхронный код. Когда вы вызываете асинхронное API, например fetch, таймер или обработчик события, продолжение не выполняется сразу. Оно будет поставлено в очередь и вернется в выполнение через event loop.

Классический пример показывает порядок:

console.log("start");

setTimeout(() => {
  console.log("timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("promise");
});

console.log("end");

Результат будет таким:

start
end
promise
timeout

Сначала выполняется весь синхронный код. Потом браузер разбирает microtasks, куда попадают продолжения промисов. После этого доходит очередь до macrotasks, например таймера. Для интервью обычно достаточно объяснить это на уровне очередей, без глубокой лекции про спецификацию.

На интервью полезно не просто назвать callbacks, Promise и async/await. Лучше показать критерий выбора. Сейчас в обычном frontend-коде чаще всего используют промисы и async/await, потому что они проще читаются и хорошо сочетаются с обработкой ошибок.

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

Опасный вариант выглядит коротко, но ломается при быстрой смене фильтра:

useEffect(() => {
  setLoading(true);

  fetch(`/api/users?q=${query}`)
    .then((response) => response.json())
    .then(setUsers)
    .finally(() => setLoading(false));
}, [query]);

Что здесь пойдет не так: старый ответ может перезаписать новые данные, ошибка сети оставит UI без понятного состояния, а строка запроса не кодируется. Если компонент размонтируется, запрос продолжит жить без пользы. Безопаснее управлять жизненным циклом запроса явно.

import { useEffect, useState } from "react";

function UsersList({ query }) {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

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

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

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

        if (!response.ok) {
          throw new Error("Failed to load users");
        }

        const data = await response.json();

        if (!Array.isArray(data)) {
          throw new Error("Unexpected response format");
        }

        setUsers(data);
      } catch (error) {
        if (error.name !== "AbortError") {
          setError(error);
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    }

    loadUsers();

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

  if (loading) return <p role="status">Loading...</p>;
  if (error) return <p role="alert">Failed to load users</p>;
  if (users.length === 0) return <p>No users found</p>;

  return <Users items={users} />;
}

Здесь важен не сам fetch, а жизненный цикл. Если query изменился или компонент размонтировался, старый запрос отменяется. Проверка формы ответа защищает UI от неожиданного API-ответа. role="status", role="alert" и empty state помогают не потерять состояние для пользователя и скринридера.

В ответе на интервью держите простой порядок: определение, механизм, практический риск. Сначала скажите, что асинхронность позволяет не блокировать основной поток ожиданием. Затем назовите Promise и async/await. Потом добавьте, что во frontend-коде нужно контролировать ошибки, отмену и порядок результатов.

Если хотите усилить ответ, приведите короткий пример. Несколько независимых запросов можно запускать параллельно с точки зрения ожидания через Promise.all, но тяжелое вычисление лучше вынести в Web Worker. Это покажет, что вы не просто повторяете определение, а понимаете ограничения модели.