特性

• 工厂函数模式 — 通过 createRequest / createPagination 创建可复用的请求实例
• 类型自动推导 — TypeScript 根据 service 返回类型自动推导 data 类型
• 多后端适配 — 通过 dataKey / listKey + totalKey 统一不同后端的数据结构
• 缓存策略 — 内置内存缓存，支持 staleTime / cacheTime 配置
• 轮询请求 — 自动定时重新请求
• 错误重试 — 支持配置重试次数和间隔
• 防抖 / 节流 — 内置请求防抖和节流
• 分页管理 — 自动管理 page / pageSize 状态
• 插件化 — 支持自定义插件扩展
• 全局配置 — 支持全局默认配置和插件注入

安装

npm install vue-rex
# or
pnpm add vue-rex
# or
yarn add vue-rex

快速开始

createRequest

import { createRequest } from 'vue-rex'

// 创建实例，dataKey 指定数据提取路径
const useApi = createRequest({ dataKey: 'data' })

// 组件中使用
const getUserList = async () => {
  const res = await fetch('/api/users')
  return res.json() // { code: 0, data: User[] }
}

const { data, loading, error, run } = useApi(getUserList)
// data.value 自动推导为 User[] 类型 ✅

createPagination

import { createPagination } from 'vue-rex'

// 创建分页实例
const usePage = createPagination({
  listKey: 'data.records',
  totalKey: 'data.total',
})

// 组件中使用
const getUserPage = async (params: { page: number; pageSize: number }) => {
  const res = await fetch(`/api/users?page=${params.page}&size=${params.pageSize}`)
  return res.json()
}

const { list, total, page, pageSize, run } = usePage(getUserPage)
// list.value 自动推导为 User[] 类型 ✅
// page / pageSize 是可写的 Ref，变化时自动触发请求

文档

文档地址 (GitHub)

致谢

• Axios
• VueRequest
• VueHookPlus
• Ahooks
• Alova
• TanStack Query