一行代码，帮你管理项目的请求接口 | vue-request

原谅我标题党了 ，希望各位看官能花几分钟看一下。

VueRequest ⚡️ 一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 composition API 请求库

为什么选择 VueRequest

在以往的业务项目中，常常被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等这些重复的实现所困惑。每当开启一个新项目时，我们都得手动去处理以上这些问题，这将是一个重复性的工作，而且还得确保团队的一致。

VueRequest 旨在为开发者提供便捷、快速的方式来管理接口的状态。在业务开发中省去上述的那些“脏活累活”，只需要简单的配置即可使用，专注于业务核心的开发。

特性

•  所有数据都具有响应式
•  轮询请求
•  自动处理错误重试
•  内置请求缓存
•  节流请求与防抖请求
•  聚焦页面时自动重新请求
• ⚙️  强大的分页扩展以及加载更多扩展
•  完全使用 Typescript 编写，具有强大的类型提示
• ⚡️  兼容 Vite
•  轻量化
•  开箱即用

文档

• English
• 中文文档

安装

你可以通过 NPM、YARN 或者通过

一旦你在页面中添加了它，你就可以在 window.VueRequest 中访问我们导出的方法。

示例

在这个例子中，useRequest 接收了一个 service 函数。service是一个异步的请求函数，换句话说，你可以使用 axios 来获取数据，然后返回一个 Promise。更具体的说明可以在文档中查看。

useRequest 还返回了三个值， data、loading 和 error。当请求还没完成时, data 将会为 undefined 同时，loading 将被设置为 true。当请求完成后，则将会根据请求结果来设定 data 和 error，并对页面进行渲染。这是因为 data、 loading 和 error 是 Vue 的 响应式引用(Refs)，它们的值将根据请求状态及请求结果来修改。

一些很酷的特性

VueRequest 有非常多的特性，如 错误重试、缓存、分页、节流、防抖...，这里列举两个个比较酷的特性

1.聚焦页面时自动重新请求

有些时候，你要确保多个浏览器窗口之间数据的一致性；又或者是当用户电脑在休眠状态重新激活后，页面的数据需要同步到最新状态时。refreshOnWindowFocus 可能会为你节省很多逻辑代码。点击这里直达文档

const { data, error, run } = useRequest(getUserInfo, {
  refreshOnWindowFocus: true,
  refocusTimespan: 1000, // 请求间隔时间
});

vue-request

2.轮询数据

有些时候，你要确保多个设备间数据的同步更新。这时候可以用我们提供的 pollingInterval 来定期重新请求接口，这样就可以保证多设备间的数据一致性。当用户进行修改数据时，两个窗口将会实时同步更新。点击这里直达文档

const { data, error, run } = useRequest(getUserInfo, {
  pollingInterval: 1000, // 请求间隔时间
});

vue-request

致谢

感谢他们为我们提供了灵感

• vercel/swr
• alibaba/hooks

最后

努力成为最好用的 Vue 请求库！

最后的最后留个 仓库地址，希望感兴趣的同学可以给我一个 Star ✨