Теория: HTTP-запросы

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

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

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

На низком уровне 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 () => {
  // GET-запрос сайта Хекслета
  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',
  }
  // axios сам упакует данные в json
  const response = await axios.post('https://ru.hexlet.io/u/new', data)
}

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