HTTP-клиенты и AJAX

Polymer предоставляет гибкие инструменты для взаимодействия с удалёнными ресурсами через HTTP. Основным способом обмена данными является использование элементов <iron-ajax> и JavaScript-функций для выполнения запросов методом fetch.

Элемент <iron-ajax>

<iron-ajax> — это встроенный веб-компонент, предназначенный для удобного выполнения AJAX-запросов и автоматического связывания данных с элементами Polymer. Он позволяет конфигурировать URL, HTTP-метод, заголовки и параметры запроса через атрибуты.

Пример базового использования:

<iron-ajax
    id="request"
    url="https://api.example.com/data"
    method="GET"
    handle-as="json"
    on-response="handleResponse"
    on-error="handleError">
</iron-ajax>

Ключевые атрибуты:

  • url — адрес, к которому будет выполнен запрос.
  • method — HTTP-метод (GET, POST, PUT, DELETE).
  • handle-as — формат обрабатываемого ответа (json, text, xml, document).
  • params — объект с параметрами запроса, автоматически сериализуемыми в URL для GET или в тело для POST.
  • headers — объект с HTTP-заголовками.

Методы управления запросами:

  • generateRequest() — инициирует выполнение запроса вручную.
  • lastRequest — возвращает объект последнего запроса с информацией о состоянии.
  • lastResponse — хранит данные последнего успешного ответа.
  • lastError — содержит данные последней ошибки запроса.

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

handleResponse(event) {
    const data = event.detail.response;
    console.log('Полученные данные:', data);
}

handleError(event) {
    console.error('Ошибка запроса:', event.detail.error);
}

Динамическая работа с параметрами и URL

Параметры запроса можно задавать через объект params, который может быть привязан к свойствам элемента:

<iron-ajax
    id="ajax"
    url="https://api.example.com/users"
    method="GET"
    params='{"page": 1, "limit": 20}'
    handle-as="json"
    last-response="{{users}}">
</iron-ajax>

Изменение параметров в коде автоматически обновляет данные при повторном вызове generateRequest():

this.$.ajax.params = { page: 2, limit: 20 };
this.$.ajax.generateRequest();

Использование fetch в Polymer

Помимо <iron-ajax>, можно применять стандартный fetch для более гибкого управления запросами, особенно при необходимости обрабатывать сложные схемы аутентификации или прокси.

Пример GET-запроса:

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Ошибка HTTP: ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        this.data = data;
    })
    .catch(error => {
        console.error('Ошибка запроса:', error);
    });

POST-запрос с отправкой JSON:

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'Polymer', version: 3 })
})
.then(response => response.json())
.then(result => console.log('Ответ сервера:', result))
.catch(error => console.error('Ошибка POST-запроса:', error));

Реактивность и привязка данных

Polymer обеспечивает реактивное обновление интерфейса при изменении данных, полученных через AJAX. Свойство, связанное с last-response или объектом, возвращаемым fetch, автоматически обновляет элементы интерфейса, если оно привязано через [[property]] или {{property}}.

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

<template is="dom-repeat" items="[[users]]">
    <div>[[item.name]] ([[item.email]])</div>
</template>

Обновление свойства users после AJAX-запроса автоматически приведет к повторной отрисовке списка.

Управление состояниями загрузки

Элемент <iron-ajax> предоставляет возможность отслеживать состояние загрузки через атрибуты loading и события:

  • loading-changed — событие изменения состояния загрузки.
  • loading — булевое свойство, указывающее, выполняется ли запрос в данный момент.

Пример отображения индикатора загрузки:

<iron-ajax
    id="ajax"
    url="https://api.example.com/data"
    handle-as="json"
    last-response="{{data}}"
    loading="{{isLoading}}">
</iron-ajax>

<template is="dom-if" if="[[isLoading]]">
    <div>Загрузка данных...</div>
</template>

Ошибки и обработка исключений

Ошибки могут возникать на уровне HTTP (4xx, 5xx) или сетевом уровне. <iron-ajax> передает ошибки через событие on-error, а fetch требует обработки через блок catch. Для удобства можно создавать обёртки, объединяющие повторные попытки запроса, логирование и уведомления пользователей.

Совместимость и кросс-доменные запросы

При работе с внешними API следует учитывать политику CORS. <iron-ajax> и fetch поддерживают установку заголовков Authorization, Content-Type и других, но сервер должен разрешать кросс-доменные запросы. Для сложных сценариев можно использовать прокси-серверы или JSONP (устаревающий метод) для обхода ограничений.

Итоговые рекомендации по использованию

  • <iron-ajax> удобен для декларативного связывания данных и отслеживания состояния запроса.
  • fetch обеспечивает больше контроля и гибкость для сложных сценариев.
  • Реактивные свойства Polymer позволяют минимизировать ручное управление DOM.
  • Правильная обработка ошибок и состояния загрузки повышает стабильность приложения.

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

Оглавление