VueRequest

Почему выбирают VueRequest?

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

Цель VueRequest — предоставить разработчикам удобный и быстрый способ управления API-состоянием. Благодаря простой конфигурации можно избежать утомительных задач и сосредоточиться на основной разработке.

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

• совместимость с Vue 2 и 3;
• все данные реактивны;
• возможность опроса запросов;
• автоматическое управление ошибками и повторными попытками;
• встроенный кэш запросов;
• регулирование запросов и предотвращение их дублирования;
• автоматический повторный запрос при фокусировке на странице;
• мощные расширения для разбивки на страницы и загрузки дополнительных данных;
• полностью написан на Typescript с мощной системой подсказок типов;
• совместим с Vite;
• лёгкий вес;
• готов к использованию после установки.

Документация:

• на английском языке;
• на китайском языке.

Установка:

Вы можете установить VueRequest через NPM, YARN или импортировать пакет из unpkg.com.

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

<script src="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>

После добавления VueRequest на страницу вы можете получить доступ к экспортированным методам в window.VueRequest.

Пример:

<template>
  <div>
    <div v-if="loading">loading...</div>
    <div v-if="error">failed to fetch</div>
    <div v-if="data">Hey! {{ data }}</div>
  </div>
</template>

<script lang="ts" setup>
const { data, loading, error } = useRequest(service);
</script>

Здесь функция useRequest принимает сервисную функцию. Сервисная функция — это асинхронный запрос, который возвращает Promise. Более подробную информацию можно найти в документации.

Функция useRequest также возвращает три значения: данные, загрузка и ошибка. Когда запрос ещё не завершён, значение данных не определено, а значение загрузки установлено в true. После завершения запроса значения данных и ошибки устанавливаются в соответствии с результатом запроса, и страница соответствующим образом отображается. Это связано с тем, что данные, загрузка и ошибка являются реактивными ссылками в Vue, и их значения изменяются в зависимости от состояния и результата запроса.

Некоторые интересные функции:

VueRequest предоставляет множество функций, таких как управление ошибками, кэширование, разбиение на страницы, регулирование и предотвращение дублирования запросов. Здесь представлены две интересные функции:

1. Автоматическое обновление при фокусировке окна: иногда необходимо обеспечить согласованность данных между несколькими окнами браузера или синхронизировать данные на странице до последнего состояния после пробуждения компьютера от спящего режима. Функция refreshOnWindowFocus может помочь вам избежать сложной логики.

2. Опрос данных: иногда требуется гарантировать синхронизацию данных между различными устройствами. В этом случае вы можете использовать pollingInterval для периодического повторного запроса интерфейса, чтобы обеспечить согласованность данных на разных устройствах. Если пользователь изменяет данные, оба окна будут обновляться в реальном времени. ## License

MIT License © 2020-present AttoJS