Как сделать http запрос в javascript

Статья поможет понять, как строить http запросы в javascript с помощью XMLHttpRequest и примерами кода. Освещаются понятия, как отправка данных, получение ответа, параметры запроса, ошибки и т.д.

Отправка HTTP запроса в JavaScript

Для отправки HTTP запроса в JavaScript можно использовать объект XMLHttpRequest, а также библиотеки, например, jQuery или Axios.

XMLHttpRequest

XMLHttpRequest (XHR) предоставляет легковесный интерфейс JavaScript для отправки и приема данных между веб-браузером и сервером. Он был представлен первоначально в IE5 и в последующих версиях браузеров. В данный момент поддерживается во всех современных браузерах.

// Создание нового объекта XMLHttpRequest
let xhr = new XMLHttpRequest();

// Настройка запроса
xhr.open('GET', 'https://example.com/api/v1/users');

// Отправка запроса
xhr.send();

// Обработка ответа
xhr.onload = function () {
    if (xhr.status != 200) {
        // Обработка ошибки
        console.log(`Error ${xhr.status}: ${xhr.statusText}`);
    } else {
        // Обработка данных
        console.log(`Done, got ${xhr.response.length} bytes`);
    }
};

xhr.onerror = function () {
    console.log("Request failed");
};

Первым делом мы создаем новый объект XHR с помощью конструктора XMLHttpRequest. Затем мы настраиваем наш запрос с помощью метода open(), в котором мы предоставляем метод запроса (GET, POST, PUT, DELETE и т. Д.), адрес запроса и предоставление этих данных асинхронно (третий аргумент по умолчанию). Затем мы отправляем запрос с помощью метода send().

Затем мы обрабатываем ответ с помощью двух событий: onload и onerror. Они будут вызваны в зависимости от ответа сервера. Если запрос завершился успешно, то будет вызвано событие onload, и мы можем проверить статус запроса и обработать полученные данные. Если запрос завершился неудачно, будет вызвано событие onerror.

jQuery

jQuery предоставляет простой интерфейс для отправки и приема данных с сервера. Это более высокоуровневый интерфейс, чем вариант XMLHttpRequest, и предоставляет более мощные механизмы для обработки ответа. Однако для многих задач jQuery не нужен, так как он предоставляет избыточные возможности, и его использование может привести к большим файлам JS.

// Отправка запроса с помощью jQuery
$.ajax({
    url: 'https://example.com/api/v1/users',
    method: 'GET',
    success: function(data) {
        // Успешная обработка данных
        console.log(data);
    },
    error: function() {
        // Обработка ошибок
        console.log('Error');
    }
});

Здесь мы используем метод jQuery.ajax() для отправки запроса на сервер. В качестве параметров мы предоставляем URL запроса, метод запроса (GET, POST, PUT, DELETE и т. Д.) и обработчики успеха и ошибки. Если запрос завершился успешно, будет вызван обработчик успеха, в котором мы можем обработать полученные данные. Если запрос завершился неудачно, будет вызван обработчик ошибок.

Axios

Axios является библиотекой с открытым исходным кодом для отправки и приема данных между веб-браузером и сервером. Он предоставляет простой и интуитивно понятный интерфейс, который легко работает в браузере и в Node.js. Он предоставляет расширенные возможности для обработки ответа, такие как поддержка промисов и поддержка автоматического преобразования JSON.

// Отправка запроса с помощью Axios
axios.get('https://example.com/api/v1/users')
    .then(function (response) {
        // Успешная обработка данных
        console.log(response.data);
    })
    .catch(function (error) {
        // Обработка ошибок
        console.log(error);
    });

Здесь мы используем метод axios.get() для отправки GET запроса на сервер. Затем мы обрабатываем ответ с помощью метода .then(), который принимает функцию-обработчик для обработки успешного ответа. Также мы можем обработать ошибки с помощью метода .catch(), который принимает функцию-обработчик для обработки ошибки.

Вы можете использовать XMLHttpRequest, jQuery или Axios для отправки HTTP запросов в JavaScript. Какой из них предпочтительнее использовать, зависит от ваших потребностей. Например, если вам нужны расширенные возможности для обработки ответа, то лучше использовать jQuery или Axios.