vue-request
Advanced tools
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.
English | 简体中文
⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。
在以往的业务项目中，我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍，这是一项重复的工作，还需要确保团队的一致性。
VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置，可以省去那些繁琐的任务，专注于业务核心的开发。
你可以通过 NPM、YARN 或者通过 <script> 的方式引入 unpkg.com 上的包。
npm install vue-request
# or
yarn add vue-request
# or
pnpm install vue-request
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。
<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、loading 和 error 是 Vue 中的响应式引用(Refs)，它们的值会根据请求状态和结果进行修改。
VueRequest 提供了很多特性，如：错误重试、缓存、分页、节流、防抖等等。这里列举两个比较酷的特性：
有时，你需要确保多个浏览器窗口之间的数据保持一致性；或者在用户电脑从休眠状态中恢复并重新激活时，需要将页面的数据同步到最新状态。使用 refreshOnWindowFocus 可以帮助你节省很多逻辑代码。点击这里直达文档
const { data, error, run } = useRequest(getUserInfo, {
refreshOnWindowFocus: true,
refocusTimespan: 1000, // 请求间隔时间
});
有时候，你需要确保多个设备之间的数据同步更新。这时候可以使用我们提供的 pollingInterval 定期重新请求接口，以确保多个设备之间的数据一致性。当用户修改数据时，两个窗口将会实时同步更新。点击这里直达文档
const { data, error, run } = useRequest(getUserInfo, {
pollingInterval: 1000, // 请求间隔时间
});
感谢他们为我们提供了灵感
MIT License © 2020-present AttoJS
FAQs
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.
We found that vue-request demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.