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

Zepto.js предоставляет упрощённый и лёгкий подход к работе с AJAX-запросами и обработке получаемых данных. Основные методы работы с ответами строятся вокруг функций $.ajax, $.get, $.post и цепочек промисов через then, что позволяет управлять асинхронными операциями и результатами запросов.

Методы работы с AJAX-ответами

1. $.ajax

Метод $.ajax является универсальным способом выполнения HTTP-запросов. Он возвращает объект jqXHR, который поддерживает методы done, fail и always для обработки ответа:

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json'
})
.done(function(response) {
    console.log('Успешный ответ:', response);
})
.fail(function(xhr, status, error) {
    console.error('Ошибка запроса:', status, error);
})
.always(function() {
    console.log('Запрос завершён');
});

Ключевые моменты:

  • dataType указывает формат ожидаемых данных (json, text, html, xml).
  • Методы done и fail позволяют разделять обработку успешного и неуспешного ответа.
  • always выполняется в любом случае, что удобно для закрытия индикаторов загрузки или очистки ресурсов.

2. Краткие методы: $.get и $.post

Для простых GET- и POST-запросов существуют сокращённые методы:

$.get('/api/data', { id: 123 }, function(response) {
    console.log('GET-ответ:', response);
}, 'json');

$.post('/api/data', { name: 'John' }, function(response) {
    console.log('POST-ответ:', response);
}, 'json');

Особенности:

  • Четвёртый аргумент указывает ожидаемый формат данных (json, text).
  • Функция обратного вызова получает данные ответа в первом параметре.
  • Простая форма удобна для одноразовых запросов без необходимости обрабатывать ошибки отдельно.

Преобразование и обработка данных ответа

Zepto автоматически преобразует JSON-ответы при указании dataType: 'json'. Для других форматов:

  • Текстовые ответы: доступны как обычная строка.
  • HTML-ответы: можно сразу вставлять в DOM с помощью метода .html().
  • XML: возвращается объект XMLDocument, который можно обходить стандартными DOM-методами.

Пример обработки JSON-данных:

$.get('/api/users', function(data) {
    data.forEach(function(user) {
        console.log(user.name, user.email);
    });
}, 'json');

Для динамического изменения DOM можно комбинировать ответ с селекторами Zepto:

$.get('/api/posts', function(posts) {
    var container = $('#posts');
    posts.forEach(function(post) {
        container.append('<div class="post"><h2>' + post.title + '</h2><p>' + post.body + '</p></div>');
    });
}, 'json');

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

Zepto поддерживает базовую обработку HTTP-ошибок через метод fail объекта jqXHR:

$.ajax({
    url: '/api/data',
    type: 'GET'
})
.fail(function(xhr) {
    if (xhr.status === 404) {
        console.error('Ресурс не найден');
    } else if (xhr.status === 500) {
        console.error('Внутренняя ошибка сервера');
    } else {
        console.error('Неизвестная ошибка:', xhr.status);
    }
});

Важно проверять статус ответа и использовать соответствующие обработчики для корректного взаимодействия с пользователем.

Работа с промисами

Все AJAX-запросы в Zepto возвращают объект с методами then, catch и always, что позволяет строить цепочки асинхронных операций:

$.get('/api/data', null, null, 'json')
.then(function(data) {
    console.log('Данные получены:', data);
    return processData(data);
})
.then(function(result) {
    console.log('Обработка завершена:', result);
})
.catch(function(err) {
    console.error('Ошибка в цепочке промисов:', err);
});

Преимущества использования промисов:

  • Чистая последовательная обработка асинхронных операций.
  • Возможность обработки ошибок на любом этапе цепочки.
  • Легкость интеграции с другими промис-ориентированными библиотеками.

Работа с заголовками ответа

Заголовки ответа можно получить через объект jqXHR:

$.ajax({
    url: '/api/data',
    type: 'GET'
})
.done(function(data, textStatus, xhr) {
    console.log('Content-Type:', xhr.getResponseHeader('Content-Type'));
});

Это полезно для проверки типа содержимого, кеширования или аутентификации.

Парсинг и фильтрация ответов

Zepto не предоставляет встроенных функций для сложного парсинга, но интеграция с функциями JavaScript позволяет:

$.getJSON('/api/users', function(users) {
    var adults = users.filter(user => user.age >= 18);
    adults.forEach(user => console.log(user.name));
});

Использование $.getJSON автоматически устанавливает dataType: 'json' и упрощает работу с объектами.

Обработка нескольких запросов одновременно

Метод $.when позволяет синхронизировать несколько AJAX-запросов:

$.when(
    $.get('/api/users', null, null, 'json'),
    $.get('/api/posts', null, null, 'json')
).then(function(usersResponse, postsResponse) {
    var users = usersResponse[0];
    var posts = postsResponse[0];
    console.log('Пользователи:', users);
    console.log('Посты:', posts);
});

Каждый ответ доступен в виде массива [data, textStatus, jqXHR]. Это позволяет комбинировать данные из разных источников перед обработкой.

Итоговые рекомендации по обработке ответов

  • Использовать dataType для автоматического преобразования данных.
  • Разделять успешные и ошибочные ответы с помощью done и fail.
  • Для цепочек асинхронных операций применять промисы (then, catch).
  • Проверять HTTP-статусы при необходимости специфической обработки ошибок.
  • Для сложных сценариев комбинировать несколько запросов через $.when.

Эффективная обработка ответов в Zepto позволяет создавать динамичные, отзывчивые веб-приложения с минимальной нагрузкой на клиентскую библиотеку.

Оглавление