Ответ: Как сделать http запрос на JavaScript в 2023 году? 2 примера с пояснениями.

Для отправки POST-запроса на JavaScript вам потребуется использовать XMLHttpRequest или современный Fetch API. Вот примеры кода для обоих методов с пояснениями:

С использованием XMLHttpRequest:

// Создаем новый объект
XMLHttpRequest var xhr = new XMLHttpRequest();
// Настраиваем запрос (метод, URL, асинхронный ли) xhr.open('POST', 'http://example.com/api', true);
// Устанавливаем заголовки (если необходимо) xhr.setRequestHeader('Content-Type', 'application/json');
// Устанавливаем обработчик события загрузки xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
// Запрос успешно выполнен console.log(xhr.responseText);
} else {
// Произошла ошибка console.error('Ошибка: ' + xhr.status);
}
};
// Устанавливаем обработчик события ошибки xhr.onerror = function() {
console.error('Произошла ошибка сети');
};
// Отправляем данные (если необходимо) var data = JSON.stringify({param1: 'value1', param2: 'value2'});
xhr.send(data);

С использованием Fetch API:

// Отправляем POST-запрос с использованием Fetch API fetch('http://example.com/api', {
method: 'POST',
headers: {
'Content-Type': 'application/json' },
body: JSON.stringify({param1: 'value1', param2: 'value2'})
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Обработка данных console.log(data);
})
.catch(error => {
// Обработка ошибок console.error('Произошла ошибка:', error);
});

Пояснения:

1. XMLHttpRequest:Создается новый объект XMLHttpRequest.
   open настраивает запрос: указывается метод (в данном случае POST), URL и параметр, указывающий, что запрос асинхронный.
   setRequestHeader используется для установки заголовков (например, тип контента).
   Устанавливаются обработчики событий onload (выполняется при успешном завершении запроса) и onerror (выполняется при ошибке сети).
   Данные могут быть отправлены с помощью метода send.
   
2. Fetch API:Используется функция fetch, которая принимает URL и объект с параметрами запроса.
   В параметрах указывается метод (method: 'POST'), заголовки (headers) и тело запроса (body), которое необходимо преобразовать в JSON-строку с помощью JSON.stringify.
   fetch возвращает промис, который можно обработать с помощью then.
   Первый then проверяет, был ли получен успешный ответ (код ответа в пределах 200-299). Если нет, выбрасывается ошибка.
   Во втором then данные обрабатываются (в данном примере предполагается, что ответ приходит в формате JSON).
   Если произойдет ошибка, она будет обработана в блоке catch.
   

Создаем кастомную функцию

Создадим функцию из нашего примера для удобства работы с http запросами на языке JavaScript.

function sendPostRequest(url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
callback(null, xhr.responseText);
} else {
callback('Ошибка: ' + xhr.status, null);
}
};
xhr.onerror = function() {
callback('Произошла ошибка сети', null);
};
xhr.send(JSON.stringify(data));
}

Пример использования:
var postData = { param1: 'value1', param2: 'value2' };
sendPostRequest('http://example.com/api', postData, function(error, response) {
if (error) {
console.error(error);
} else {
console.log(response);
}
});

Надеюсь, это поможет вам сделать POST-запросы на JavaScript! Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать в комментариях.