Что такое асинхронность — почему данные приходят «потом», а не сразу

Ты пишешь три строки одну за другой. Логика подсказывает: сначала выполнится первая, потом вторая, потом третья. Обычно так и есть. Но со строкой, которая лезет за данными на сервер — сюрприз: следующая строка выполняется раньше, чем первая успела принести ответ.

Отсюда классическая боль новичка: данные точно приходят, ты их видишь в консоли, а переменная — undefined. Ничего не сломалось. Просто код не стал ждать. Это и есть асинхронность — и через пару минут ты будешь понимать, почему await всё чинит.

Что такое асинхронность простыми словами

Асинхронный (asynchronous) код — это код, который не замораживает программу, пока ждёт долгую операцию. Запрос к серверу, чтение файла, пауза — всё это занимает время. Синхронный код встал бы и ждал. Асинхронный говорит: «начни это, а я пока пойду дальше — среагирую, когда будет готово».

Аналогия: ты поставил чайник. Ты же не стоишь над ним, уставившись, пока он кипит. Ты идёшь резать бутерброд, а чайник свистнет, когда закипит. Синхронный код — это стоять и пялиться на чайник. Асинхронный — заниматься делом и среагировать на свист.

Зачем так вообще? Чтобы интерфейс не замирал. Пока грузятся данные с сервера (это бывают секунды), приложение должно оставаться живым — крутить спиннер, реагировать на клики. Если бы оно вставало намертво на каждый запрос, любая загрузка выглядела бы как зависание.

Почему код «убегает вперёд»

Вот где ломается интуиция. Разберём на трёх шагах:

• шаг 1: попроси данные с сервера
• шаг 2: возьми эти данные и покажи на экране
• шаг 3: живи дальше

Кажется, шаг 2 дождётся шага 1. Нет. Запрос из шага 1 — долгий, он уходит «в фон». Программа не ждёт — она сразу прыгает на шаг 2. А данных ещё нет: они в пути. Поэтому переменная пустая, undefined.

Ответ придёт, но позже — через сотни миллисекунд, когда сервер ответит. К этому моменту шаги 2 и 3 давно отработали на пустоте. Это не баг сервера и не опечатка. Это порядок, в котором выполняется асинхронный код. Понять этот порядок — половина отладки.

await — как сказать «дождись здесь»

Чтобы код всё-таки дождался, есть слово await (и его напарник async). await ставится перед долгой операцией и означает буквально: «остановись здесь, пока не придёт результат, потом иди дальше».

• было: const data = fetchData() — data пустой, потому что запрос ещё летит
• стало: const data = await fetchData() — строка ждёт, data приходит заполненным

Важная деталь: await можно писать только внутри функции, помеченной async. Это не каприз языка — это способ сказать: «эта функция умеет ждать, не замораживая всё остальное». Пока одна функция стоит на своём await, программа спокойно делает другие дела.

Раньше, до await, то же самое писали через колбэки и «промисы» (Promise — обещание, что результат придёт позже). await — это просто человекочитаемая обёртка над тем же механизмом.

Где ты уже с этим сталкивался

Практически везде, где приложение общается с внешним миром:

• запрос к серверу или API — самый частый случай;
• чтение из базы данных;
• загрузка файла или картинки;
• ответ модели, который приходит по кусочкам — стриминг это асинхронность в чистом виде.

И типичный симптом, когда забыл про асинхронность: пустая белая страница или «мигающий» интерфейс, который на миг показывает пустоту, а потом данные. Если ИИ написал тебе код с запросом, а данные не появляются — первым делом проверь, есть ли await там, где ты ждёшь ответ.

Частые вопросы

Асинхронность — это то же, что многопоточность?

Нет. Многопоточность — это когда несколько задач реально выполняются одновременно на разных ядрах. Асинхронность обычно работает в одном потоке: программа не делает два дела в один момент, она просто не простаивает — пока ждёт ответ, занимается другим. Для новичка разница простая: async про «не ждать впустую», а не про «делать буквально параллельно».

Почему без await переменная undefined, а не ошибка?

Потому что технически всё «правильно»: запрос ушёл, функция вернула не данные, а обещание данных (Promise). Ты положил это обещание туда, где ждёшь готовое значение — вот и undefined (или странный [object Promise]). Ошибки нет: язык не считает это ошибкой, он считает, что ты знаешь, что делаешь.

Нужно ли ставить await перед каждой строкой?

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