Параллельная загрузка

Параллельная загрузка данных и асинхронная обработка запросов — важные аспекты при работе с динамическими веб-приложениями. В Solid.js параллельная загрузка может быть реализована эффективно благодаря реактивной системе и мощным средствам, которые фреймворк предоставляет для работы с состоянием и асинхронными операциями. В этой главе рассматриваются ключевые принципы параллельной загрузки в Solid.js, а также лучшие практики и примеры.

Реактивность и асинхронные операции

Solid.js использует реактивную модель, основанную на вычисляемых значениях (computations), которые обновляются автоматически при изменении зависимостей. Это позволяет интегрировать асинхронные запросы и динамически обновлять интерфейс без необходимости вручную управлять состоянием или событиями.

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

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

В Solid.js для работы с асинхронными данными предусмотрен хук createResource. Это основной инструмент для работы с внешними API, серверными запросами и другими асинхронными операциями.

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

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

import { createResource } from "solid-js";

function App() {
  const [data, { refetch }] = createResource(async () => {
    const response = await fetch("https://api.example.com/data");
    return await response.json();
  });

  return (
    <div>
      <button onCl ick={refetch}>Перезагрузить данные</button>
      {data() ? (
        <pre>{JSON.stringify(data(), null, 2)}</pre>
      ) : (
        <p>Загрузка...</p>
      )}
    </div>
  );
}

В этом примере createResource используется для загрузки данных с API. Компонент автоматически обновляется, когда данные становятся доступными. Это позволяет избежать необходимости вручную контролировать состояние загрузки или ошибку запроса.

Параллельная загрузка нескольких ресурсов

Одним из популярных случаев является параллельная загрузка нескольких независимых данных. Для этого можно использовать несколько вызовов createResource и объединять их в одном компоненте. Каждое состояние будет обновляться отдельно, при этом UI будет обновляться по мере получения данных.

Пример параллельной загрузки двух ресурсов:

import { createResource } from "solid-js";

function App() {
  const [userData] = createResource(async () => {
    const res = await fetch("https://api.example.com/user");
    return await res.json();
  });

  const [postsData] = createResource(async () => {
    const res = await fetch("https://api.example.com/posts");
    return await res.json();
  });

  return (
    <div>
      <h2>Информация о пользователе</h2>
      {userData() ? (
        <pre>{JSON.stringify(userData(), null, 2)}</pre>
      ) : (
        <p>Загрузка информации о пользователе...</p>
      )}

      <h2>Посты</h2>
      {postsData() ? (
        <pre>{JSON.stringify(postsData(), null, 2)}</pre>
      ) : (
        <p>Загрузка постов...</p>
      )}
    </div>
  );
}

Здесь два асинхронных запроса выполняются параллельно. Когда оба ресурса загружены, данные отображаются на странице. Этот подход позволяет эффективно использовать время ожидания, не блокируя другие запросы.

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

При параллельной загрузке важно учитывать обработку ошибок и отображение состояния загрузки. Solid.js позволяет удобно управлять этим с помощью состояния loading и error в хук createResource. В случае с несколькими ресурсами, можно организовать централизованное управление состоянием загрузки и ошибок, чтобы улучшить пользовательский опыт.

Пример с обработкой ошибок и состоянием загрузки:

import { createResource } from "solid-js";

function App() {
  const [userData, { refetch: refetchUser }] = createResource(async () => {
    const response = await fetch("https://api.example.com/user");
    if (!response.ok) {
      throw new Error("Не удалось загрузить данные пользователя");
    }
    return await response.json();
  });

  const [postsData, { refetch: refetchPosts }] = createResource(async () => {
    const response = await fetch("https://api.example.com/posts");
    if (!response.ok) {
      throw new Error("Не удалось загрузить посты");
    }
    return await response.json();
  });

  return (
    <div>
      <h2>Информация о пользователе</h2>
      {userData.loading && <p>Загрузка...</p>}
      {userData.error && <p>Ошибка: {userData.error.message}</p>}
      {userData() && <pre>{JSON.stringify(userData(), null, 2)}</pre>}

      <h2>Посты</h2>
      {postsData.loading && <p>Загрузка...</p>}
      {postsData.error && <p>Ошибка: {postsData.error.message}</p>}
      {postsData() && <pre>{JSON.stringify(postsData(), null, 2)}</pre>}

      <button onCl ick={refetchUser}>Перезагрузить информацию о пользователе</button>
      <button onCl ick={refetchPosts}>Перезагрузить посты</button>
    </div>
  );
}

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

Использование Promise.all для параллельной загрузки

Когда необходимо параллельно загрузить несколько ресурсов, но при этом нужно выполнить дополнительные действия после получения всех данных, можно использовать Promise.all. Это позволит эффективно управлять зависимостями и выполнением действий после завершения всех асинхронных операций.

Пример использования Promise.all:

import { createSignal, onCleanup } from "solid-js";

function App() {
  const [data, setData] = createSignal(null);

  async function loadData() {
    const [userRes, postsRes] = await Promise.all([
      fetch("https://api.example.com/user"),
      fetch("https://api.example.com/posts"),
    ]);

    const userData = await userRes.json();
    const postsData = await postsRes.json();

    setData({ user: userData, posts: postsData });
  }

  loadData();

  return (
    <div>
      <h2>Информация о пользователе</h2>
      {data() ? (
        <pre>{JSON.stringify(data().user, null, 2)}</pre>
      ) : (
        <p>Загрузка информации о пользователе...</p>
      )}

      <h2>Посты</h2>
      {data() ? (
        <pre>{JSON.stringify(data().posts, null, 2)}</pre>
      ) : (
        <p>Загрузка постов...</p>
      )}
    </div>
  );
}

Здесь мы используем Promise.all для параллельной загрузки данных о пользователе и постах, а затем обновляем состояние с помощью setData. Этот подход позволяет упростить логику обработки нескольких асинхронных запросов.

Заключение

Параллельная загрузка данных — важная техника для улучшения производительности и взаимодействия с пользователем в современных веб-приложениях. В Solid.js эта задача решается благодаря мощной реактивной системе и простым инструментам, таким как createResource и асинхронные операции. Подходы, описанные в этой главе, позволяют создавать быстрые и отзывчивые интерфейсы, минимизируя время ожидания и увеличивая удобство использования.

Оглавление