Axios и другие HTTP-клиенты

Slim.js — это современная библиотека для создания реактивных пользовательских интерфейсов на JavaScript. Несмотря на компактность, она отлично интегрируется с любыми способами работы с HTTP-запросами, включая популярные клиенты вроде Axios или встроенный fetch. В основе работы с HTTP в Slim.js лежит реактивное обновление состояния компонентов при изменении данных, полученных с сервера.

Slim.js не предоставляет собственного HTTP-клиента, поэтому взаимодействие с сервером реализуется через сторонние библиотеки или стандартные средства JavaScript. При этом реактивность компонентов позволяет автоматически отображать полученные данные без дополнительных усилий.

Использование fetch с компонентами Slim.js

Встроенный метод fetch позволяет выполнять асинхронные HTTP-запросы. Для интеграции с Slim.js данные можно хранить в реактивных свойствах компонента:

import { Slim } from 'slim-js';

class UsersList extends Slim {
  users = [];

  constructor() {
    super();
    this.loadUsers();
  }

  async loadUsers() {
    try {
      const response = await fetch('https://api.example.com/users');
      if (!response.ok) throw new Error('Ошибка сети');
      this.users = await response.json();
    } catch (error) {
      console.error('Не удалось загрузить пользователей:', error);
    }
  }

  get template() {
    return `
      <ul>
        ${this.users.map(user => `<li>${user.name}</li>`).join('')}
      </ul>
    `;
  }
}

customElements.define('users-list', UsersList);

Ключевой момент: обновление свойства this.users автоматически инициирует перерисовку шаблона благодаря реактивной системе Slim.js.

Axios как HTTP-клиент в Slim.js

Axios предоставляет удобный API для работы с HTTP-запросами и поддерживает промисы, что идеально сочетается с асинхронной природой компонентов. Пример интеграции:

import { Slim } from 'slim-js';
import axios from 'axios';

class PostsList extends Slim {
  posts = [];

  constructor() {
    super();
    this.loadPosts();
  }

  async loadPosts() {
    try {
      const { data } = await axios.get('https://api.example.com/posts');
      this.posts = data;
    } catch (error) {
      console.error('Ошибка загрузки постов:', error);
    }
  }

  get template() {
    return `
      <ul>
        ${this.posts.map(post => `<li>${post.title}</li>`).join('')}
      </ul>
    `;
  }
}

customElements.define('posts-list', PostsList);

Особенности использования Axios:

  • Автоматическое преобразование JSON.
  • Поддержка таймаутов, перехватчиков запросов и ответов.
  • Удобная обработка ошибок через try/catch.

Реактивное обновление данных

Slim.js позволяет связывать свойства компонента с отображением. Любое изменение реактивного свойства (this.posts, this.users) инициирует перерисовку части DOM, где оно используется. Это упрощает работу с асинхронными запросами: данные можно получать в любом месте компонента, а интерфейс автоматически обновится без ручного манипулирования DOM.

class CommentsList extends Slim {
  comments = [];

  async refresh() {
    const { data } = await axios.get('/comments');
    this.comments = data; // автоматическое обновление DOM
  }
}

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

Для сложных интерфейсов рекомендуется хранить состояние запроса: loading, error, data. Это позволяет управлять отображением спиннеров, сообщений об ошибках и результатов.

class TodoList extends Slim {
  todos = [];
  loading = false;
  error = null;

  async fetchTodos() {
    this.loading = true;
    this.error = null;
    try {
      const { data } = await axios.get('/todos');
      this.todos = data;
    } catch (err) {
      this.error = err.message;
    } finally {
      this.loading = false;
    }
  }

  get template() {
    if (this.loading) return `<p>Загрузка...</p>`;
    if (this.error) return `<p>Ошибка: ${this.error}</p>`;
    return `
      <ul>
        ${this.todos.map(todo => `<li>${todo.title}</li>`).join('')}
      </ul>
    `;
  }
}

Преимущество: состояние компонента полностью управляет визуализацией, исключая необходимость прямых манипуляций с DOM.

Работа с параметрами и POST-запросами

Axios и fetch поддерживают передачу параметров запроса и тела POST. В Slim.js это удобно использовать для форм и интерактивных элементов.

async addUser(name) {
  try {
    const { data } = await axios.post('/users', { name });
    this.users = [...this.users, data];
  } catch (err) {
    console.error('Ошибка добавления пользователя', err);
  }
}

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

  • Расширяемость через перехватчики Axios (interceptors).
  • Возможность автоматической сериализации объектов в JSON.
  • Совместимость с реактивной моделью Slim.js, позволяющая сразу обновлять интерфейс после успешного запроса.

Сравнение fetch и Axios

Параметр fetch Axios
Поддержка JSON Нужно вручную response.json() Автоматическая
Таймаут Требует обертки Встроенный
Перехватчики Нет Есть
Старые браузеры Требует полифила Требует полифила

Slim.js интегрируется с обоими методами одинаково хорошо, выбор зависит от требований проекта.

Вывод

Интеграция HTTP-клиентов в Slim.js строится на реактивном обновлении свойств компонентов. Любой асинхронный запрос, будь то через fetch или Axios, автоматически обновляет интерфейс при изменении данных. Управление состоянием загрузки и ошибок обеспечивает гибкость и чистоту кода, позволяя строить сложные и отзывчивые пользовательские интерфейсы без лишних манипуляций с DOM.

Оглавление