Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AttoJS/vue-request
⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc. ⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。
https://github.com/AttoJS/vue-request
axios composition-api swr userequest vue vue-request vue3 vuerequest
Last synced: 2 months ago
JSON representation
⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc. ⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。
- Host: GitHub
- URL: https://github.com/AttoJS/vue-request
- Owner: AttoJS
- License: mit
- Created: 2020-10-20T08:57:40.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-17T05:07:43.000Z (5 months ago)
- Last Synced: 2024-10-24T02:26:41.975Z (2 months ago)
- Topics: axios, composition-api, swr, userequest, vue, vue-request, vue3, vuerequest
- Language: TypeScript
- Homepage: https://www.attojs.org
- Size: 1.82 MB
- Stars: 1,309
- Watchers: 12
- Forks: 91
- Open Issues: 40
-
Metadata Files:
- Readme: README-en_US.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
English | [简体中文](README.md)
VueRequest
⚡️ This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc.
## Why VueRequest
In past projects, we were often troubled by the repetitive implementation of loading state management, request throttling and debouncing, API data caching, pagination, etc. Every time we started a new project, we had to handle these issues manually, which was a repetitive task that also required ensuring team consistency.
VueRequest is designed to provide developers with a convenient and fast way to manage API states. By simply configuring it, you can eliminate the tedious tasks and focus on core development.
## Features
- 🌈 Support Vue 2 & 3
- 🚀 All data is reactive
- 🔄 Interval polling
- 🤖 Automatic error retry
- 🗄 Built-in cache
- 💧 Throttle and Debounce
- ⚙️ Powerful pagination extension and load more extensions
- 📠 Written in TypeScript
- ⚡️ Compatible with Vite
- 🍃 Lightweight
- 📦 Out of the box
## Documentation
- [English](https://www.attojs.org/)
- [中文文档](https://www.attojs.com/)
## Install
You can install VueRequest with [NPM](https://www.npmjs.com/), [YARN](https://yarnpkg.com/), or a `` via [unpkg.com](https://unpkg.com/)
### NPM
```sh
npm install vue-request
# or
yarn add vue-request
# or
pnpm install vue-request
```
### CDN
> For production environments, we recommend linking to a specific version and build file to avoid unexpected breaking changes caused by new versions.
```html
<script src="https://unpkg.com/vue-request/dist/vue-request.min.js">
```
Once you add it to your page, you can access our exported methods in `window.VueRequest`.
## Usage
```vue
loading...
failed to fetch
Hey! {{ data }}
const { data, loading, error } = useRequest(service);
```
In this example, `useRequest` receives a `service` function. `service` is an asynchronous request function, which means you can use **axios** to retrieve data and return a **Promise**. More specific details can be found in the [documentation](https://www.attojs.org/guide/documentation/dataFetching.html).
The `useRequest` function also returns three values: `data`, `loading`, and `error`. While the request is still in progress, `data` will be set to `undefined` and `loading` will be `true`. Once the request is completed, `data` and `error` will be set based on the result, and the page will be rendered accordingly. This is because `data`, `loading`, and `error` are [Reactivity(Refs)](https://vuejs.org/guide/essentials/reactivity-fundamentals.html) in Vue, and their values will be updated based on the request status and result.
## Some of the coolest features:
VueRequest provides many features, such as error retry, caching, pagination, throttling, debouncing, and more. Here are two particularly cool features:
### 1.Refresh On Focus
Sometimes, you need to ensure data consistency across multiple browser windows or synchronize page data to the latest state when a user's computer resumes from sleep mode. Using `refreshOnWindowFocus` can save you a lot of logic code. [Click here to go to the document](https://www.attojs.org/guide/documentation/refreshOnWindowFocus.html)
```ts
const { data, error, run } = useRequest(getUserInfo, {
refreshOnWindowFocus: true,
refocusTimespan: 1000, // refresh interval 1s
});
```
### 2.Polling Data
Sometimes, you need to ensure data synchronization across multiple devices. In this case, you can use `pollingInterval` provided by us to periodically re-request the API, ensuring data consistency across multiple devices. When a user modifies the data, the changes will be synced in real-time between two windows. [Click here to go to the document](https://www.attojs.org/guide/documentation/polling.html)
```ts
const { data, error, run } = useRequest(getUserInfo, {
pollingInterval: 1000, // polling interval 1s
});
```
## Thanks
Thank them for inspiring us.
- [vercel/swr](https://github.com/vercel/swr)
- [alibaba/hooks](https://ahooks.js.org/hooks/async#userequest)
## License
[MIT License](https://github.com/AttoJS/vue-request/blob/master/LICENSE) © 2020-present [AttoJS](https://github.com/AttoJS)