POST-запросы

Библиотека Cash предоставляет удобный и компактный интерфейс для работы с DOM, а также включает средства для выполнения AJAX-запросов, среди которых ключевое место занимают POST-запросы. Они используются для передачи данных на сервер и получения ответа, часто в формате JSON или текстовом виде.

Основы метода $.post

Метод $.post является упрощённой обёрткой над $.ajax с предустановленным методом POST. Его синтаксис:

$.post(url, data, success, dataType);
  • url — адрес, на который отправляется запрос.
  • data — объект с ключами и значениями, который будет сериализован в тело запроса.
  • success — функция обратного вызова, которая выполняется при успешном завершении запроса. Получает ответ сервера как аргумент.
  • dataType — необязательный параметр, определяющий формат ожидаемых данных ('json', 'text', 'html', 'script').

Пример отправки простого POST-запроса с JSON-данными:

$.post('/api/user', { name: 'Иван', age: 30 }, function(response) {
    console.log('Ответ сервера:', response);
}, 'json');

В этом примере объект { name: 'Иван', age: 30 } автоматически сериализуется в строку формата application/x-www-form-urlencoded. Если сервер ожидает JSON, рекомендуется использовать JSON.stringify и указать заголовок Content-Type.

Отправка JSON с POST

Для работы с JSON необходимо использовать метод $.ajax, так как $.post по умолчанию сериализует данные как URL-кодированные строки:

$.ajax({
    url: '/api/user',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'Иван', age: 30 }),
    dataType: 'json',
    success: function(response) {
        console.log('Ответ сервера:', response);
    },
    error: function(xhr, status, error) {
        console.error('Ошибка запроса:', status, error);
    }
});
  • contentType: ‘application/json’ — указывает серверу, что тело запроса содержит JSON.
  • dataType: ‘json’ — заставляет Cash автоматически преобразовывать ответ в объект JavaScript.

Обработка ошибок

Методы $.post и $.ajax позволяют обработать не только успешный ответ, но и ошибки:

$.ajax({
    url: '/api/user',
    method: 'POST',
    data: { name: 'Иван' },
    success: function(response) {
        console.log('Успешный ответ:', response);
    },
    error: function(xhr) {
        console.log('Статус:', xhr.status);
        console.log('Ответ сервера:', xhr.responseText);
    }
});
  • xhr.status возвращает HTTP-код ответа (например, 404, 500).
  • xhr.responseText содержит текст ответа сервера, полезный для отладки.

Асинхронные POST-запросы и промисы

Cash поддерживает использование промисов через метод then, что позволяет писать цепочки асинхронных операций:

$.post('/api/login', { login: 'user', password: '1234' })
    .then(function(response) {
        console.log('Вход выполнен, токен:', response.token);
        return $.post('/api/profile', { token: response.token });
    })
    .then(function(profile) {
        console.log('Профиль пользователя:', profile);
    })
    .catch(function(err) {
        console.error('Ошибка при запросе:', err);
    });

Метод then срабатывает при успешном ответе сервера, а catch — при сетевой ошибке или сбое на сервере.

Настройка заголовков

Для POST-запросов часто необходимо добавлять собственные HTTP-заголовки, например для авторизации:

$.ajax({
    url: '/api/data',
    method: 'POST',
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN',
        'X-Custom-Header': 'CustomValue'
    },
    data: { query: 'test' },
    success: function(response) {
        console.log('Данные получены:', response);
    }
});

Передача файлов через POST

Отправка файлов требует использования FormData и отключения автоматической сериализации:

const formData = new FormData();
formData.append('file', document.querySelector('#fileInput').files[0]);
formData.append('description', 'Документ');

$.ajax({
    url: '/api/upload',
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log('Файл загружен:', response);
    }
});
  • processData: false отключает преобразование объекта FormData в строку.
  • contentType: false позволяет браузеру автоматически установить корректный multipart/form-data.

Таймаут и отмена запросов

Для долгих запросов полезно задать таймаут:

const xhr = $.ajax({
    url: '/api/longtask',
    method: 'POST',
    timeout: 5000, // 5 секунд
    success: function(response) {
        console.log('Результат:', response);
    },
    error: function(xhr, status) {
        if (status === 'timeout') {
            console.warn('Запрос превысил время ожидания');
        }
    }
});

Запрос можно отменить, вызвав xhr.abort():

xhr.abort(); // Прерывает запрос

Выводы по POST-запросам

POST-запросы в Cash — гибкий инструмент для взаимодействия с сервером. Они позволяют:

  • Передавать как простые данные, так и JSON.
  • Загружать файлы с помощью FormData.
  • Обрабатывать успешные ответы и ошибки.
  • Использовать промисы для последовательных асинхронных операций.
  • Настраивать заголовки, таймауты и отменять запросы.

Эта функциональность делает Cash удобным для построения клиентской части, которая активно взаимодействует с API, не требуя больших объёмов кода.

Оглавление