Vue3Request

Appearance

Vue3Request小而美的Vue3异步处理解决方案

让复杂的异步逻辑变得简单优雅，让重复的样板代码成为历史

快速开始
演示
🚀

响应式数据管理

所有状态都具备 Vue 3 响应式特性，自动追踪数据变化，无需手动管理状态更新

智能请求中止

自动生成 AbortSignal 中止过期请求，避免状态污染和竞态条件问题

💾

缓存 & SWR

内置智能缓存机制和 SWR 策略，提升用户体验的同时减少服务器压力

🔄

错误重试机制

可配置的智能重试策略，自动处理网络异常

📠

TypeScript 原生支持

完全使用 TypeScript 编写，提供完整的类型定义和智能代码提示

🔁

轮询

支持可控制的轮询请求，实现数据实时同步，适用于仪表板和监控场景

🎯

窗口聚焦刷新

用户重新聚焦页面时智能刷新数据，确保显示的始终是最新内容

⚡

防抖 & 节流

内置防抖和节流功能，优化用户交互体验，减少不必要的请求调用

🧩

插件化架构

强大的插件生态，支持自定义插件，可扩展满足各种复杂业务场景

🍃

轻量高效

核心代码精简，按需加载，不会给你的项目增加不必要的负担

🔌

框架无关

完美兼容 Axios、Fetch 等任意请求库，无缝集成到现有项目中

📦

开箱即用

零配置启动，内置最佳实践，让你专注于业务逻辑而非基础设施

⚡ 快速安装 ​

选择你喜欢的包管理器，立即开始 Vue3Request 之旅：

bash
pnpm add vue3-request
bash
npm install vue3-request
bash
cnpm install vue3-request
bash
yarn add vue3-request

🚀 5 分钟上手 ​

vue
<template>
  <div>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">{{ error.message }}</div>
    <div v-else>{{ data }}</div>
    <button @click="refresh">刷新</button>
    <button @click="abort">中止</button>
  </div>
</template>

<script setup lang="ts">
import { useRequest } from "vue3-request";

const getUserInfo = async () => {
  const response = await fetch("/api/userInfo", {
    signal: signal.value,
  });
  return response.json();
};

// 一行代码搞定状态管理
const { data, error, loading, signal, refresh, abort } = useRequest(getUserInfo); 
</script>