> 原谅我标题党了😆 ，希望各位看官能花几分钟看一下。 **VueRequest ⚡️ 一个能轻松帮你管理请求状态（支持SWR，轮询，错误重试，缓存，分页等）的 Vue 3 composition API 请求库** ## 为什么选择 VueRequest 在以往的业务项目中，常常被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等这些重复的实现所困惑。每当开启一个新项目时，我们都得手动去处理以上这些问题，这将是一个重复性的工作，而且还得确保团队的一致。 VueRequest 旨在为开发者提供便捷、快速的方式来管理接口的状态。在业务开发中省去上述的那些“脏活累活”，只需要简单的配置即可使用，专注于业务核心的开发。 ## 特性 - 🚀 所有数据都具有响应式 - 🔄 轮询请求 - 🤖 自动处理错误重试 - 🗄 内置请求缓存 - 💧 节流请求与防抖请求 - 🎯 聚焦页面时自动重新请求 - ⚙️ 强大的分页扩展以及加载更多扩展 - 📠 完全使用 Typescript 编写，具有强大的类型提示 - ⚡️ 兼容 Vite - 🍃 轻量化 - 📦 开箱即用 ## 文档 - [English](https://www.attojs.org/) - [中文文档](https://www.attojs.com/) ## 安装你可以通过 [NPM](https://www.npmjs.com/)、[YARN](https://yarnpkg.com/) 或者通过 ` ``` 一旦你在页面中添加了它，你就可以在 `window.VueRequest` 中访问我们导出的方法。 ## 示例 ```vue ``` 在这个例子中，`useRequest` 接收了一个 `service` 函数。`service`是一个异步的请求函数，换句话说，你可以使用 **axios** 来获取数据，然后返回一个 **Promise**。更具体的说明可以在[文档](https://www.attojs.com/guide/documentation/dataFetching.html)中查看。 `useRequest` 还返回了三个值， `data`、`loading` 和 `error`。当请求还没完成时, `data` 将会为 `undefined` 同时，`loading` 将被设置为 `true`。当请求完成后，则将会根据请求结果来设定 `data` 和 `error`，并对页面进行渲染。这是因为 `data`、 `loading` 和 `error` 是 Vue 的 [响应式引用(Refs)](https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html)，它们的值将根据请求状态及请求结果来修改。 ## 一些很酷的特性 VueRequest 有非常多的特性，如错误重试、缓存、分页、节流、防抖...，这里列举两个个比较酷的特性 ### 1.聚焦页面时自动重新请求有些时候，你要确保多个浏览器窗口之间数据的一致性；又或者是当用户电脑在休眠状态重新激活后，页面的数据需要同步到最新状态时。`refreshOnWindowFocus` 可能会为你节省很多逻辑代码。[点击这里直达文档](https://www.attojs.com/guide/documentation/refreshOnWindowFocus.html) ```ts const { data, error, run } = useRequest(getUserInfo, { refreshOnWindowFocus: true, refocusTimespan: 1000, // 请求间隔时间 }); ``` ![vue-request](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04d5575c51a64aa58293d6e749fb2cc9~tplv-k3u1fbpfcp-zoom-1.image) ### 2.轮询数据有些时候，你要确保多个设备间数据的同步更新。这时候可以用我们提供的 `pollingInterval` 来定期重新请求接口，这样就可以保证多设备间的数据一致性。当用户进行修改数据时，两个窗口将会实时同步更新。[点击这里直达文档](https://www.attojs.com/guide/documentation/polling.htm) ```ts const { data, error, run } = useRequest(getUserInfo, { pollingInterval: 1000, // 请求间隔时间 }); ``` ![vue-request](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50082d73b98f4bb2a1a51520750da322~tplv-k3u1fbpfcp-zoom-1.image) ## 致谢感谢他们为我们提供了灵感 - [vercel/swr](https://github.com/vercel/swr) - [alibaba/hooks](https://ahooks.js.org/hooks/async#userequest) ## 最后努力成为最好用的 Vue 请求库！最后的最后留个 [仓库地址](https://github.com/AttoJS/vue-request)，希望感兴趣的同学可以给我一个 Star ✨