@pluve/use-request-vue

一个基于 Vue 3 Composition API 的请求管理 Hook

📚 文档地址

特性

• 🚀 开箱即用 - 简单易用的 API 设计
• 🔄 自动管理生命周期 - 自动处理 loading、error 状态
• 🧩 插件化 - 内置防抖、节流、轮询、缓存等常用插件
• ⚡ TypeScript 支持 - 完整的类型定义

安装

# npm
npm install @pluve/use-request-vue

# yarn
yarn add @pluve/use-request-vue

快速开始

<template>
  <div>
    <button @click="run">获取数据</button>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error">错误: {{ error.message }}</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script setup>
import useRequest from '@pluve/use-request-vue';

// 基本用法
const { data, loading, error, run } = useRequest((params) => fetch('/api/user', { params }).then((res) => res.json()));
</script>

插件使用示例

// 使用防抖插件
const { data, run } = useRequest((params) => fetch('/api/search', { params }).then((res) => res.json()), {
  manual: true, // 手动触发请求
  debounceInterval: 300, // 防抖间隔300ms
});

许可证

MIT