其实，

Vue Rex：一个更简单的 Vue 3 请求库

它解决什么问题

在 Vue 项目里我们经常要写这样的代码：

const loading = ref
const data = ref
const fetchUser = async => {
loading.value = true
try {
const res = await getUser
data.value = res.data // 每次都要手动提取
} finally {
loading.value = false
}
}
onMounted

每个接口都要重复这套逻辑：管理 loading、提取数据、处理错误。其实，写多了就会想，能不能把这些重复的东西抽出来？

假设你的后端返回这样的结构：

{ "code":,"data": { "id":,"name": "张三" },"message": "success"}

用 Vue Rex 的话：

const useApi = createRequest
const { data,loading } = useApi
// data.value 直接就是 User 类型，不用手动提取，类型也自动推导好了

Vue Rex 主要解决三个问题：

1. 自动提取数据配置一次 dataKey所有请求自动提取对应字段
2. 类型自动推导根据 service 函数返回类型自动推导 data 类型，不需要手动标注泛型
3. 统一配置通过工厂函数创建请求实例，全局共享配置

安装

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

推荐的项目结构

从第一步先来看，定义 API 层

// api/user.ts
import axios from 'axios'
// 后端统一返回格式
interface ApiResponse {
从code来看，number
说到data，T
message: string
}
// 使用者类型
export interface User {
id这方面，number
从name来看，string
再看email，string
}
// API 函数
export const getUser = => axios.get
export const getUserList = => axios.get'

从接下来来看，创建 Hooks 层

// hooks/api.ts
import { createRequest,createPagination } from 'vue-rex'
// 创建请求实例
export const useApi = createRequest({
dataKey: 'data',options: {
errorRetryCount:
cacheTime:
}
})
// 创建分页实例
export const usePage = createPagination({
listKey: 'data.list',totalKey: 'data.total'
})'

：在组件中使用

' 

主要功能详解

自动提取数据 + 型推导

配置一次 dataKey,之后所有请求都会自动提取对应字段,而且 TypeScript 型也会自动推导 :

interface ApiResponse { code :number,data :T,message :string}interface User{ id :number,name :string}const get User=async:Promise=>{ return fetch.n)}const use Api=create Requestconst{data}=use Api// 数据的 type 是 Ref,不需要您手动写 generic

支持 deep path,比如 backend returns {代码 :,结果:{数据:{列表:}}}:

const use Api=create Requestconst{data}=use Api// 数据直接就是 User type

错误处理

Vue Rex 的 error

server.interceptors.response.use=">{if{return">

分页管理

<代码class =" hljs语言 - ts”lang =" ts “ const use Page=create Paginationconst{list,total,page,page Size}=use Page// page 和 page Size 是 Ref ,改了就会自动重新请求 page.value=

<代码class =" hljs语言 - ts”lang =" ts “ //backend A:{代码:,Data:{...}} const use ApiA=create Request //backend B:{成功:true,结果:{Data:{...}}} const use ApiB=create Request //backend C:{状态:,响应:{body:{...}}} const use ApiC=create Request //组件中用起来一样 const{d Data:A}=use APIAConst{d Data:C}=UseAPIC //三个 d ata都是 U ser type.

< h3=""> <>

缓存。