0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Асинхронность всегда возникает там, где есть операции ввода/вывода, к которым относятся не только файловые операции, но и любое сетевое взаимодействие. В первую очередь это касается запросов по HTTP, без которых не обходится практически ни одно веб-приложение. А фронтенд только и делает, что выполняет запросы к серверу.</p>
1
<p>Асинхронность всегда возникает там, где есть операции ввода/вывода, к которым относятся не только файловые операции, но и любое сетевое взаимодействие. В первую очередь это касается запросов по HTTP, без которых не обходится практически ни одно веб-приложение. А фронтенд только и делает, что выполняет запросы к серверу.</p>
2
<p>Для понимания этого урока, нужно представлять как работает HTTP API. Если вы не знакомы с этой концепцией, то прочитайте наш гайд<a>Что такое API</a></p>
2
<p>Для понимания этого урока, нужно представлять как работает HTTP API. Если вы не знакомы с этой концепцией, то прочитайте наш гайд<a>Что такое API</a></p>
3
<p>Асинхронность в сетевых запросах возникает естественным образом. Серверу нужно какое-то время на то, чтобы принять запрос, обработать и вернуть ответ обратно. Причём ответ может и не дойти в случае ошибок сети.</p>
3
<p>Асинхронность в сетевых запросах возникает естественным образом. Серверу нужно какое-то время на то, чтобы принять запрос, обработать и вернуть ответ обратно. Причём ответ может и не дойти в случае ошибок сети.</p>
4
<p>На низком уровне HTTP-запрос и HTTP-ответ - это всего лишь текст, посылаемый к серверу и от сервера обратно клиенту:</p>
4
<p>На низком уровне HTTP-запрос и HTTP-ответ - это всего лишь текст, посылаемый к серверу и от сервера обратно клиенту:</p>
5
<p>В прикладном коде реальная структура запроса и ответа скрывается для более удобного управления. Сами же запросы выполняются с помощью HTTP-клиентов, библиотек, задача которых сводится к выполнению запросов и обработке ответов по HTTP. В мире JavaScript (фронтенд и бекенд) для этого используют библиотеку<a>axios</a>. Ниже простой пример:</p>
5
<p>В прикладном коде реальная структура запроса и ответа скрывается для более удобного управления. Сами же запросы выполняются с помощью HTTP-клиентов, библиотек, задача которых сводится к выполнению запросов и обработке ответов по HTTP. В мире JavaScript (фронтенд и бекенд) для этого используют библиотеку<a>axios</a>. Ниже простой пример:</p>
6
<p>Интерфейс работы этой библиотеки крайне прост. Для каждого метода HTTP внутри нее определен соответствующий метод объекта axios. В примере выше используется get(), но также можно использовать post(), delete() и другие. Первым параметром каждый из этих методов принимает URL. Последующие параметры варьируются в зависимости от смысла методов. Сами методы асинхронны, поэтому их использование обычно сопровождается<em>async/await</em>.</p>
6
<p>Интерфейс работы этой библиотеки крайне прост. Для каждого метода HTTP внутри нее определен соответствующий метод объекта axios. В примере выше используется get(), но также можно использовать post(), delete() и другие. Первым параметром каждый из этих методов принимает URL. Последующие параметры варьируются в зависимости от смысла методов. Сами методы асинхронны, поэтому их использование обычно сопровождается<em>async/await</em>.</p>
7
<p>В свою очередь, результатом любого запроса будет объект Response, представляющий собой ответ сервера. Для удобства использования, в этом объекте хранится не только "сырой" ответ, но и данные ответа, подготовленные для удобной обработки. Например, для получения статуса ответа достаточно обратиться к свойству response.status.</p>
7
<p>В свою очередь, результатом любого запроса будет объект Response, представляющий собой ответ сервера. Для удобства использования, в этом объекте хранится не только "сырой" ответ, но и данные ответа, подготовленные для удобной обработки. Например, для получения статуса ответа достаточно обратиться к свойству response.status.</p>
8
<p>Для выполнения POST-запроса нужно воспользоваться методом post(). Вторым параметром этот метод принимает объект с данными, который отправится на сервер. Axios достаточно умная библиотека, чтобы самостоятельно представить этот объект в виде текста (как часть тела запроса) и установить все нужные заголовки для его обработки (например, content-length или content-type).</p>
8
<p>Для выполнения POST-запроса нужно воспользоваться методом post(). Вторым параметром этот метод принимает объект с данными, который отправится на сервер. Axios достаточно умная библиотека, чтобы самостоятельно представить этот объект в виде текста (как часть тела запроса) и установить все нужные заголовки для его обработки (например, content-length или content-type).</p>
9
<p>Как правило, HTTP-запросы не выполняются пачками. В реальном коде отправка формы, загрузка данных и другие действия пользователя приводят к одному простому запросу. Поэтому хоть здесь и используется асинхронность, сложности такой код практически не добавляет. А благодаря<em>async/await</em>код в принципе выглядит, как синхронный.</p>
9
<p>Как правило, HTTP-запросы не выполняются пачками. В реальном коде отправка формы, загрузка данных и другие действия пользователя приводят к одному простому запросу. Поэтому хоть здесь и используется асинхронность, сложности такой код практически не добавляет. А благодаря<em>async/await</em>код в принципе выглядит, как синхронный.</p>