Основы асинхронных запросов

Zepto.js предоставляет компактный и эффективный способ работы с DOM, событиями и AJAX-запросами в браузере. Особое внимание в библиотеке уделено асинхронным запросам, что позволяет выполнять сетевые операции без блокировки пользовательского интерфейса.

Основной метод AJAX

Для выполнения асинхронных HTTP-запросов используется метод $.ajax(). Он поддерживает все стандартные HTTP-методы и позволяет гибко настраивать параметры запроса.

Синтаксис:

$.ajax({
    url: 'https://api.example.com/data', // адрес ресурса
    type: 'GET',                          // метод запроса (GET, POST, PUT, DELETE)
    dataType: 'json',                     // ожидаемый формат данных
    data: { id: 123 },                    // данные для отправки на сервер
    timeout: 5000,                        // таймаут в миллисекундах
    success: function(response) {
        console.log('Данные получены:', response);
    },
    error: function(xhr, status, error) {
        console.error('Ошибка запроса:', status, error);
    }
});

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

  • url — обязательный параметр, указывающий адрес запроса.
  • type — метод HTTP-запроса, по умолчанию GET.
  • dataType — формат данных, который ожидается в ответе (json, xml, html, text, script).
  • data — объект с данными, которые отправляются на сервер.
  • timeout — время ожидания ответа, после которого запрос автоматически завершится с ошибкой.
  • success и error — функции обратного вызова для обработки результата.

Методы-обёртки: $.get и $.post

Для упрощения использования AJAX Zepto предоставляет краткие методы для GET и POST-запросов.

GET-запрос:

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

POST-запрос:

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

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

Асинхронная обработка ошибок

Zepto.js позволяет легко обрабатывать ошибки, возникающие при запросах. Помимо параметра error в $.ajax(), можно использовать метод .fail() для цепочек промисов.

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

Метод .done() соответствует успешному завершению запроса, .fail() — ошибке, а .always() выполняется в любом случае, что удобно для снятия индикаторов загрузки.

Работа с JSONP

JSONP используется для обхода ограничений политики одного источника. В Zepto достаточно указать параметр dataType: 'jsonp'.

$.ajax({
    url: 'https://api.example.com/data?callback=?',
    dataType: 'jsonp',
    success: function(response){
        console.log('JSONP-ответ:', response);
    },
    error: function(){
        console.error('Ошибка JSONP-запроса');
    }
});

Знак вопроса ? в URL автоматически заменяется Zepto на имя функции обратного вызова, что упрощает работу с внешними API.

Настройка заголовков и кэширования

Для управления заголовками HTTP можно использовать параметр headers:

$.ajax({
    url: '/api/data',
    type: 'GET',
    headers: {
        'Authorization': 'Bearer token',
        'X-Requested-With': 'XMLHttpRequest'
    },
    success: function(data){
        console.log('Ответ с заголовками:', data);
    }
});

Для отключения кэширования GET-запросов используется параметр cache: false, что особенно полезно при работе с динамическими данными.

Цепочки промисов и асинхронная последовательность

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

$.get('/api/user', { id: 1 })
  .then(function(user){
      return $.get('/api/posts', { userId: user.id });
  })
  .then(function(posts){
      console.log('Посты пользователя:', posts);
  })
  .fail(function(error){
      console.error('Ошибка цепочки запросов:', error);
  });

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

Настройка глобальных обработчиков AJAX

Zepto позволяет определить глобальные функции, выполняемые для всех AJAX-запросов:

$(document).ajaxStart(function(){
    console.log('Начало любого AJAX-запроса');
}).ajaxStop(function(){
    console.log('Все AJAX-запросы завершены');
}).ajaxError(function(event, xhr, settings, error){
    console.error('Глобальная ошибка запроса:', error);
});

Эти события удобны для отображения индикаторов загрузки и логирования ошибок на уровне всего приложения.

Асинхронная загрузка скриптов и HTML

Методы $.getScript и $.get с dataType: 'html' позволяют загружать и исполнять внешние ресурсы без перезагрузки страницы:

$.getScript('/js/module.js', function(){
    console.log('Скрипт загружен и выполнен');
});

$.get('/partials/content.html', function(html){
    $('#container').html(html);
});

Использование этих методов повышает динамичность интерфейса и снижает нагрузку на сервер за счёт частичной подгрузки контента.

Zepto.js обеспечивает лаконичный и мощный интерфейс для работы с асинхронными запросами, сохраняя при этом совместимость с популярными паттернами JavaScript, такими как промисы и цепочки коллбеков. Гибкая настройка запросов, поддержка JSONP, управление заголовками и глобальные обработчики делают библиотеку удобным инструментом для создания динамических веб-приложений.

Оглавление