VueRequest

VueRequest

⚡️ Это библиотека, которая может легко помочь вам управлять состояниями запросов, поддерживая такие общие функции, как SWR, опрос, повторная попытка при ошибке, кэширование и пагинация и т. д.

Почему VueRequest

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

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

Особенности

• 🌈 Поддержка Vue 2 и 3
• 🚀 Все данные реактивны
• 🔄 Опрос с интервалом
• 🤖 Автоматическая повторная попытка в случае ошибки
• 🗄 Встроенный кэш
• 💧 Регулирование частоты запросов (throttle) и устранение дребезга (debounce)
• ⚙️ Мощные расширения для пагинации и загрузки дополнительных данных
• 📠 Написан на TypeScript
• ⚡️ Совместимость с Vite
• 🍃 Лёгкий вес
• 📦 Из коробки

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

• Английский
• 中文文档

Установка

Вы можете установить VueRequest с помощью NPM, YARN или тега <script> через unpkg.com.

NPM

npm install vue-request
# или
yarn add vue-request
# или
pnpm install vue-request

CDN

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

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

После добавления на страницу вы сможете получить доступ к нашим экспортированным методам в 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 получает функцию service. service — это асинхронная функция запроса, что означает, что вы можете использовать axios для извлечения данных и возврата Promise. Более подробную информацию можно найти в документации.

Функция useRequest также возвращает три значения: data, loading и error. Пока запрос всё ещё выполняется, data будет установлено в значение undefined, а loading будет равно true. Как только запрос будет завершён, data и error будут установлены на основе результата, и страница будет отображаться соответствующим образом. Это связано с тем, что data, Загрузка и ошибка — это реактивность (Refs) в Vue, и их значения будут обновляться на основе статуса запроса и результата.

Некоторые из самых интересных функций:

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

1. Обновление при фокусировке

Иногда вам необходимо обеспечить согласованность данных между несколькими окнами браузера или синхронизировать данные страницы с последним состоянием, когда компьютер пользователя выходит из спящего режима. Использование refreshOnWindowFocus может сэкономить вам много кода логики. Нажмите здесь, чтобы перейти к документу.

const { data, error, run } = useRequest(getUserInfo, {
  refreshOnWindowFocus: true,
  refocusTimespan: 1000, // интервал обновления 1с
});

2. Опрос данных

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

const { data, error, run } = useRequest(getUserInfo, {
  pollingInterval: 1000, // интервал опроса 1с
});

Спасибо

Поблагодарите их за вдохновение.

• vercel/swr
• alibaba/hooks

Лицензия

Лицензия MIT © 2020–н.в. AttoJS