English | 简体中文
在以往的业务项目中,我们经常会被 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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型