Загрузка данных

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

Определение свойств и реактивность

В SkateJS свойства компонента описываются через объект props. Каждое свойство может быть реактивным, что позволяет автоматически обновлять DOM при изменении значения. Для работы с загружаемыми данными рекомендуется создавать отдельное свойство, например data, которое будет хранить результат асинхронной операции.

import { define, props, Component } from 'skatejs';

class DataLoader extends Component {
  static props = {
    data: props.array({
      default: () => []
    }),
    loading: props.boolean({
      default: false
    })
  };

  connectedCallback() {
    super.connectedCallback();
    this.fetchData();
  }
}
define('data-loader', DataLoader);
  • props.array: используется для хранения коллекций данных.
  • props.boolean: удобно для индикаторов загрузки.

Асинхронная загрузка данных

Для получения данных с сервера применяются стандартные средства JavaScript — fetch, axios или другие HTTP-клиенты. SkateJS позволяет выполнять асинхронные операции внутри методов жизненного цикла компонента, таких как connectedCallback или пользовательских методов.

async fetchData() {
  this.loading = true;
  try {
    const response = await fetch('https://api.example.com/items');
    const result = await response.json();
    this.data = result;
  } catch (error) {
    console.error('Ошибка при загрузке данных:', error);
  } finally {
    this.loading = false;
  }
}
  • this.loading может использоваться для отображения индикатора загрузки.
  • this.data автоматически вызывает повторный рендер компонента при изменении.

Рендеринг данных в шаблоне

SkateJS поддерживает JSX и встроенные функции render для динамического отображения данных. После загрузки массива элементов можно построить списки или таблицы, используя реактивное свойство data.

import { h } from 'skatejs';

class DataLoader extends Component {
  render() {
    if (this.loading) {
      return <p>Загрузка данных...</p>;
    }

    if (!this.data.length) {
      return <p>Данные отсутствуют</p>;
    }

    return (
      <ul>
        {this.data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}
  • h используется для генерации виртуального DOM.
  • this.data.map позволяет создавать реактивные списки элементов.

Обработка ошибок и состояния загрузки

При работе с асинхронными данными важно учитывать различные состояния:

  1. Загрузка — индикатор процесса (loading = true).
  2. Успех — данные получены и отображаются (data.length > 0).
  3. Ошибка — вывод сообщения об ошибке или fallback-данных.
async fetchData() {
  this.loading = true;
  this.error = null;

  try {
    const response = await fetch('https://api.example.com/items');
    if (!response.ok) throw new Error('Сервер вернул ошибку');
    this.data = await response.json();
  } catch (err) {
    this.error = err.message;
  } finally {
    this.loading = false;
  }
}

render() {
  if (this.loading) return <p>Загрузка данных...</p>;
  if (this.error) return <p>Ошибка: {this.error}</p>;
  if (!this.data.length) return <p>Данные отсутствуют</p>;

  return (
    <ul>
      {this.data.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}
  • Реактивные свойства error и loading управляют отображением состояния компонента.
  • Ошибки сервера или сети могут быть обработаны и отображены пользователю.

Оптимизация и повторная загрузка данных

Компоненты, загружающие данные, часто должны поддерживать повторные запросы и обновление информации. В SkateJS это реализуется через методы, вызываемые по событию или по изменению пропсов.

refresh() {
  this.fetchData();
}

// Пример использования кнопки для обновления
render() {
  return (
    <div>
      <button onCl ick={() => this.refresh()}>Обновить</button>
      {this.loading ? <p>Загрузка...</p> : <ul>{this.data.map(item => <li key={item.id}>{item.name}</li>)}</ul>}
    </div>
  );
}
  • Метод refresh может быть вызван в ответ на события, такие как клик или таймер.
  • SkateJS обеспечивает реактивное обновление DOM без ручного вмешательства.

Интеграция с внешними хранилищами и API

SkateJS легко сочетается с глобальными состояниями или сторонними библиотеками управления данными, такими как Redux или Zustand. Для этого достаточно подписывать компонент на изменения внешнего состояния и обновлять реактивное свойство data.

// Пример подписки на глобальный стор
store.subscribe(() => {
  dataLoader.data = store.getState().items;
});
  • Данные остаются реактивными.
  • Компонент автоматически перерисовывается при изменении состояния.

Итоговые принципы

  • Любое асинхронное действие должно обновлять реактивное свойство.
  • Состояния загрузки, успеха и ошибки должны быть явно определены.
  • JSX и функции render позволяют эффективно отображать динамические данные.
  • Методы обновления данных упрощают повторные загрузки и интеграцию с внешними API.

Эти принципы создают основу для надёжных и масштабируемых веб-компонентов с динамическим контентом на SkateJS.

Оглавление