English | 简体中文
⚡️ 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.
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.
You can install VueRequest with NPM, YARN, or a <script>
via unpkg.com
npm install vue-request
# or
yarn add vue-request
# or
pnpm install vue-request
For production environments, we recommend linking to a specific version and build file to avoid unexpected breaking changes caused by new versions.
<script src="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>
Once you add it to your page, you can access our exported methods in 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>
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.
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) in Vue, and their values will be updated based on the request status and result.
VueRequest provides many features, such as error retry, caching, pagination, throttling, debouncing, and more. Here are two particularly cool features:
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
const { data, error, run } = useRequest(getUserInfo, {
refreshOnWindowFocus: true,
refocusTimespan: 1000, // refresh interval 1s
});
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
const { data, error, run } = useRequest(getUserInfo, {
pollingInterval: 1000, // polling interval 1s
});
Thank them for inspiring us.
MIT License © 2020-present AttoJS
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。