Настройка сети

Unpoly — это библиотека JavaScript, предназначенная для создания динамических веб-приложений с частичной перезагрузкой страниц. В основе её работы лежат асинхронные запросы и замена фрагментов DOM, что позволяет поддерживать плавную работу интерфейса без полной перезагрузки.

Конфигурация сетевых запросов

Unpoly использует AJAX-запросы через fetch API, скрыто обрабатывая большинство сетевых операций. Настройка сети в Unpoly включает:

  1. Базовый URL и префиксы По умолчанию Unpoly использует относительные пути, но для крупных приложений часто требуется указать базовый URL:

    up.network.configure({
  urlPrefix: '/api/'
});

    Параметр urlPrefix добавляет префикс ко всем запросам, что упрощает работу с REST-эндпоинтами.

  2. Заголовки по умолчанию Для передачи токенов авторизации, CSRF-токенов или других данных можно использовать глобальные заголовки:

    up.network.configure({
  headers: {
    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
    'Authorization': 'Bearer ' + token
  }
});

    Важно: эти заголовки будут автоматически добавляться ко всем сетевым вызовам Unpoly.

  3. Методы HTTP и их настройка Unpoly поддерживает стандартные методы: GET, POST, PUT, PATCH, DELETE. Метод указывается при инициализации запроса или через атрибуты элементов:

    <a href="/users/1" up-target="#user-details" up-method="PUT">Обновить пользователя</a>

    При использовании JavaScript API метод указывается так:

    up.ajax('/users/1', { method: 'PATCH', data: { name: 'Иван' } });

Управление поведением кэширования

Unpoly кэширует содержимое фрагментов для ускорения навигации:

  • Кэширование фрагментов: по умолчанию фрагменты сохраняются в памяти и могут быть повторно использованы при возврате к предыдущему состоянию.

  • Отключение кэша: для динамического контента можно отключить кэш:

    up.ajax('/dashboard', { cache: false });

  • Настройка TTL (time-to-live): можно задать максимальное время хранения кэшированного фрагмента:

    up.network.configure({ cacheTTL: 30000 }); // 30 секунд

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

Unpoly предоставляет удобные хуки для управления ошибками:

  • up:request:error — срабатывает при сетевой ошибке или коде HTTP ≥ 400.
  • up:request:complete — вызывается после завершения запроса, независимо от результата.

Пример обработки ошибок:

up.on('up:request:error', function(event) {
  console.error('Ошибка запроса:', event.response.status, event.response.statusText);
  alert('Не удалось загрузить данные. Попробуйте позже.');
});

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

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

up.ajax('/reports/generate', {
  timeout: 10000 // 10 секунд
});

Отменить запрос можно через возвращаемый объект:

let request = up.ajax('/slow-endpoint');
request.abort();

Продвинутая маршрутизация и сетевые фильтры

Unpoly позволяет перехватывать и модифицировать запросы перед их отправкой:

up.on('up:request:before', function(event) {
  if (!userIsLoggedIn()) {
    event.preventDefault(); // отменяет запрос
  }
});

Можно изменять URL, данные или заголовки прямо перед отправкой:

up.on('up:request:before', function(event) {
  event.request.url = '/api' + event.request.url;
  event.request.headers['X-Debug'] = 'true';
});

Интеграция с глобальными сетевыми инструментами

Unpoly хорошо сочетается с библиотеками для авторизации, аналитики и логирования. Например, можно использовать fetch-промисы для расширенного контроля:

up.network.configure({
  fetch: function(request) {
    console.log('Отправка запроса на', request.url);
    return fetch(request);
  }
});

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

Особенности работы с JSON и HTML

  • JSON: передача данных через up.ajax с опцией dataType: 'json' автоматически парсит ответ:

    up.ajax('/api/users', { dataType: 'json' }).then(function(response) {
  console.log(response.data);
});

  • HTML-фрагменты: для обновления частей страницы достаточно указать up-target:

    <a href="/users/42" up-target="#profile">Посмотреть профиль</a>

    В ответ сервер может отправить только HTML-фрагмент без полной страницы, а Unpoly автоматически обновит указанный элемент.

Безопасность сетевых операций

  • Всегда использовать CSRF-токены для POST, PATCH, DELETE-запросов.
  • Проверять заголовки авторизации при интеграции с API.
  • Контролировать таймауты, чтобы избежать зависания интерфейса при медленных соединениях.

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

Оглавление