乐趣区

关于前端:一行代码帮你管理项目的请求接口-vuerequest

jiezi

原谅我题目党了😆，心愿各位看官能花几分钟看一下。

VueRequest ⚡️ 一个能轻松帮你治理申请状态（反对 SWR，轮询，谬误重试，缓存，分页等）的 Vue 3 composition API 申请库

为什么抉择 VueRequest

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

VueRequest 旨在为开发者提供便捷、疾速的形式来治理接口的状态。在业务开发中省去上述的那些“脏活累活”，只须要简略的配置即可应用，专一于业务外围的开发。

个性

  • 🚀  所有数据都具备响应式
  • 🔄  轮询申请
  • 🤖  主动处理错误重试
  • 🗄  内置申请缓存
  • 💧  节流申请与防抖申请
  • 🎯  聚焦页面时主动从新申请
  • ⚙️  弱小的分页扩大以及加载更多扩大
  • 📠  齐全应用 Typescript 编写，具备弱小的类型提醒
  • ⚡️  兼容 Vite
  • 🍃  轻量化
  • 📦  开箱即用

文档

  • English
  • 中文文档

装置

你能够通过 NPM、YARN 或者通过 <script> 的形式引入 unpkg.com 上的包。

NPM

npm install vue-request
# or
yarn add vue-request

CDN

对于生产环境，咱们举荐链接到一个明确的版本号和构建文件，以防止新版本造成的不可预期的毁坏。

<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">
import {defineComponent} from 'vue';
export default defineComponent({setup() {const { data, loading, error} = useRequest(service);

    return {
      data,
      loading,
      error,
    };
  },
});
</script>

在这个例子中，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, // 申请间隔时间
});

2. 轮询数据

有些时候，你要确保多个设施间数据的同步更新。这时候能够用咱们提供的 pollingInterval 来定期从新申请接口，这样就能够保障多设施间的数据一致性。当用户进行批改数据时，两个窗口将会实时同步更新。点击这里中转文档 

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

致谢

感激他们为咱们提供了灵感

  • vercel/swr
  • alibaba/hooks

最初

致力成为最好用的 Vue 申请库！

最初的最初留个 仓库地址，心愿感兴趣的同学能够给我一个 Star ✨

退出移动版