V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
John60676
V2EX  ›  JavaScript

一行代码,帮你管理项目的请求

  •  3
     
  •   John60676 · 80 天前 · 1662 次点击
    这是一个创建于 80 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    VueRequest

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

    Coverage Status Size Version Languages Star Download

    为什么选择 VueRequest

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

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

    特性

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

    文档

    安装

    你可以通过 NPMYARN 或者通过 <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 还返回了三个值, dataloadingerror。当请求还没完成时, data 将会为 undefined 同时,loading 将被设置为 true。当请求完成后,则将会根据请求结果来设定 dataerror,并对页面进行渲染。这是因为 dataloadingerror 是 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

    致谢

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

    仓库地址

    https://github.com/AttoJS/vue-request

    10 条回复    2021-09-18 16:09:55 +08:00
    eluotao
        1
    eluotao   80 天前   ❤️ 1
    好像很有意思 先顶一下 有空再看。
    Macv1994
        2
    Macv1994   80 天前   ❤️ 2
    大佬们,别写了,学不赢了。
    John60676
        3
    John60676   80 天前
    @Macv1994 学完这个就不学啦 😆
    basefas
        4
    basefas   80 天前   ❤️ 1
    看起来不错
    wensonsmith
        5
    wensonsmith   80 天前   ❤️ 1
    很好!之前就已经 star 了, 准备用起来
    John60676
        6
    John60676   80 天前
    @wensonsmith 有疑问可以随时提 issue 哦

    @basefas 感谢支持
    xrr2016
        7
    xrr2016   80 天前   ❤️ 1
    关注一波 👍
    John60676
        8
    John60676   80 天前
    @xrr2016 感谢支持 😁
    kim886
        9
    kim886   79 天前 via Android   ❤️ 1
    是个大佬👍
    scyuns
        10
    scyuns   72 天前   ❤️ 1
    是个大佬 很强
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2822 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:27 · PVG 19:27 · LAX 03:27 · JFK 06:27
    ♥ Do have faith in what you're doing.