Обработка ответов сервера

Umbrella JS предоставляет компактный и удобный API для выполнения асинхронных запросов к серверу и обработки полученных данных. Основной метод для работы с сервером — u.ajax(), который позволяет отправлять HTTP-запросы различного типа и управлять ответами.

Метод u.ajax()

Метод принимает объект настроек с параметрами запроса:

u.ajax({
    url: '/api/data',
    method: 'GET',
    data: { id: 123 },
    headers: { 'X-Custom-Header': 'value' },
    success: function(response) { console.log(response); },
    error: function(error) { console.error(error); }
});

Основные параметры:

  • url — адрес запроса. Обязательный параметр.
  • method — тип HTTP-запроса (GET, POST, PUT, DELETE), по умолчанию GET.
  • data — объект с данными, которые будут отправлены на сервер. Для GET-запросов они преобразуются в query string.
  • headers — дополнительные HTTP-заголовки.
  • success — функция обратного вызова при успешном ответе сервера. Получает один параметр — тело ответа.
  • error — функция обратного вызова при ошибке запроса.

Обработка JSON-ответов

Umbrella JS автоматически пытается распарсить ответ сервера как JSON, если он имеет соответствующий заголовок Content-Type: application/json. Это позволяет работать с объектами напрямую:

u.ajax({
    url: '/api/users',
    method: 'GET',
    success: function(data) {
        data.forEach(user => console.log(user.name));
    },
    error: function(err) {
        console.error('Ошибка получения данных:', err);
    }
});

Если сервер возвращает текст или HTML, response будет строкой.

Асинхронная обработка через промисы

Хотя u.ajax() традиционно использует колбэки, возможно обернуть его в промис для использования async/await:

function fetchData(url) {
    return new Promise((resolve, reject) => {
        u.ajax({
            url: url,
            method: 'GET',
            success: resolve,
            error: reject
        });
    });
}

async function loadUsers() {
    try {
        const users = await fetchData('/api/users');
        console.log(users);
    } catch (err) {
        console.error(err);
    }
}

Это упрощает цепочку асинхронных действий и делает код более читабельным.

Обработка ошибок и статусов ответа

В объекте ошибки, передаваемом в error, содержится информация о статусе и тексте ответа:

u.ajax({
    url: '/api/data',
    method: 'GET',
    error: function(xhr) {
        console.log('Статус:', xhr.status);
        console.log('Текст ошибки:', xhr.statusText);
    }
});

Это позволяет гибко реагировать на ошибки сервера, например, различать 404 Not Found и 500 Internal Server Error.

Отправка данных на сервер

Для POST-запросов данные можно передавать в объекте data:

u.ajax({
    url: '/api/save',
    method: 'POST',
    data: { name: 'John', age: 30 },
    success: function(response) {
        console.log('Сохранено:', response);
    }
});

Если нужно отправить данные в формате JSON, их следует преобразовать:

u.ajax({
    url: '/api/save',
    method: 'POST',
    data: JSON.stringify({ name: 'John', age: 30 }),
    headers: { 'Content-Type': 'application/json' },
    success: function(response) {
        console.log(response);
    }
});

Работа с несколькими запросами

Для параллельной загрузки нескольких ресурсов используется комбинация Promise.all и обёртки u.ajax в промис:

async function loadMultiple() {
    try {
        const [users, posts] = await Promise.all([
            fetchData('/api/users'),
            fetchData('/api/posts')
        ]);
        console.log(users, posts);
    } catch (err) {
        console.error(err);
    }
}

Это удобно при необходимости получить данные из нескольких источников одновременно.

Настройка таймаута

Umbrella JS позволяет задать максимальное время ожидания ответа сервера через параметр timeout (в миллисекундах):

u.ajax({
    url: '/api/data',
    timeout: 5000,
    error: function(xhr) {
        if (xhr.status === 0) {
            console.log('Превышено время ожидания запроса');
        }
    }
});

Если сервер не успевает ответить в указанное время, срабатывает ошибка.

Применение в реальных сценариях

Umbrella JS подходит для динамической загрузки данных на страницы без перезагрузки, обработки форм и взаимодействия с REST API. Его компактность и простота делают его удобным инструментом для легких проектов и учебных целей, где не требуется тяжеловесный jQuery или Axios.

Фокус на u.ajax() и правильной обработке ответов сервера обеспечивает быстрый и безопасный обмен данными между клиентом и сервером с минимальным количеством кода.

Оглавление