Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

HTTP-запросы JS: Асинхронное программирование

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

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

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

GET / HTTP/1.1
HOST: ru.hexlet.io


HTTP/1.1 200 OK
Date: Mon, 27 Jul 2020 12:28:53 GMT
Server: Nginx/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2020 19:15:56 GMT
Content-Length: 666
Content-Type: text/html
Connection: Closed

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

import axios from 'axios';

// Не забываем, что функция асинхронная
const fn = async () => {
  const response = await axios.get('https://ru.hexlet.io');
  console.log(response.status); // код ответа
  console.log(response.headers); // напечатает заголовки
  console.log(response.data); // тело ответа
}

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

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

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

const fn = async () => {
  const data = {
    email: 'mysuper@email.com',
    firstName: 'Ivan',
  };
  const response = await axios.post('https://ru.hexlet.io/u/new', data);
}

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
29 сентября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
29 сентября 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»