Repository files navigation

English | 简体中文

⚡️ 这是一个能够轻松帮助你管理请求状态的库，支持 SWR、轮询、错误重试、缓存、分页等常用功能。

在以往的业务项目中，我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍，这是一项重复的工作，还需要确保团队的一致性。

VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置，可以省去那些繁琐的任务，专注于业务核心的开发。

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

• English
• 中文文档

你可以通过NPM、YARN 或者通过<script> 的方式引入unpkg.com 上的包。

npm install vue-request# oryarn add vue-request# orpnpm install vue-request

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

<scriptsrc="https://unpkg.com/vue-request/dist/vue-request.min.js"></script>

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

<template>  <div>    <divv-if="loading">loading...</div>    <divv-if="error">failed to fetch</div>    <divv-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,// 请求间隔时间});

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

• vercel/swr
• alibaba/hooks

MIT License © 2020-presentAttoJS