JS: Асинхронное программирование
2026-02-26 17:18 Diff
https://ru.hexlet.io/courses/js-asynchronous-programming/lessons/http/theory_unit

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

Для понимания этого урока, нужно представлять как работает HTTP API. Если вы не знакомы с этой концепцией, то прочитайте наш гайд Что такое API

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

На низком уровне HTTP-запрос и HTTP-ответ — это всего лишь текст, посылаемый к серверу и от сервера обратно клиенту:

В прикладном коде реальная структура запроса и ответа скрывается для более удобного управления. Сами же запросы выполняются с помощью HTTP-клиентов, библиотек, задача которых сводится к выполнению запросов и обработке ответов по HTTP. В мире JavaScript (фронтенд и бекенд) для этого используют библиотеку axios. Ниже простой пример:

Интерфейс работы этой библиотеки крайне прост. Для каждого метода HTTP внутри нее определен соответствующий метод объекта axios. В примере выше используется get(), но также можно использовать post(), delete() и другие. Первым параметром каждый из этих методов принимает URL. Последующие параметры варьируются в зависимости от смысла методов. Сами методы асинхронны, поэтому их использование обычно сопровождается async/await.

В свою очередь, результатом любого запроса будет объект Response, представляющий собой ответ сервера. Для удобства использования, в этом объекте хранится не только "сырой" ответ, но и данные ответа, подготовленные для удобной обработки. Например, для получения статуса ответа достаточно обратиться к свойству response.status.

Для выполнения POST-запроса нужно воспользоваться методом post(). Вторым параметром этот метод принимает объект с данными, который отправится на сервер. Axios достаточно умная библиотека, чтобы самостоятельно представить этот объект в виде текста (как часть тела запроса) и установить все нужные заголовки для его обработки (например, content-length или content-type).

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