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

POST-запрос JS: Синхронная асинхронность

Разобравшись с get запросом, пора переходить к post и передаче данных на сервер. Для начала познакомимся с методом request модуля http. Ниже пример обычного GET запроса, который мы делали с помощью http.get:

const options = {
  hostname: 'ru.hexlet.io',
  path: 'my',
  method: 'GET', // default
}
const req = http.request(options, res => {
  console.log(res.statusCode);
});
req.end();

На самом деле, http.get – это обертка над http.request, которая выполняет req.end автоматически. Ее добавили в модуль http только потому, что это очень частый вариант использования. Другими словами, http.request — универсальный способ делать http запросы. Для выполнения любого запроса, нужно лишь правильно подставить глагол в опцию method, будь то хоть POST, хоть HEAD.

Следующий аспект это заголовок Content-Length. Как вы помните из курса http, этот заголовок обязателен при наличии тела запроса. Он содержит цифру — количество байт в теле запроса. Так как данные формы обычно отправляют, используя тип application/x-www-form-urlencoded, то перед подсчетом размера тела его нужно сначала сформировать, выполнив правильные преобразования.

// Content-Type: application/x-www-form-urlencoded

const postData = querystring.stringify({
  'msg': 'Hello World!',
  'key': 'value',
});
// msg=Hello%20World!&key=value

// Content-Length: ?

Buffer.byteLength(postData);
// 28

Рекомендуется всегда использовать такой способ определения размера тела запроса, потому что он считает количество байт, в отличие от length, который считает количество символов в текстовом представлении. Различия будут проявляться при использовании символов, не входящих в ASCII.

'Пошло поехало'.length; // 13
Buffer.byteLength('Пошло поехало'); // 25

Теперь можно собрать все вместе и выполнить post запрос с передачей данных формы:

const options = {
  hostname: 'www.google.com',
  path: '/upload',
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Content-Length': Buffer.byteLength(postData)
  }
};
const req = http.request(options, (res) => {
  console.log(`STATUS: ${res.statusCode}`);
});
req.write(postData);
req.end();

Данные отправляются с помощью метода write объекта request. Часто можно упростить отправку до вызова req.end(postData). Метод write больше полезен тогда, когда используется отправка с помощью чанков, например, в случае передачи больших бинарных данных (картинки, видео).


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

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

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

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»