Vue 3 中 Axios 封装怎么结合 TypeScript 定义响应数据接口-Vue.js-PHP中文网

vue 3 中结合 typescript 封装 axios 的核心是让类型贯穿请求全流程：定义泛型 baseresponse 接口统一响应结构，为各接口单独建模数据类型，请求函数支持泛型透传，拦截器确保类型安全与错误处理。

vue 3 中 axios 封装怎么结合 typescript 定义响应数据接口

在 Vue 3 中结合 TypeScript 封装 Axios，核心是让接口返回的数据具备可预测的结构和编辑器智能提示。关键不在于“写个接口”，而在于让类型贯穿请求发起、拦截处理、业务调用全过程。

定义通用响应结构接口

后端通常统一返回类似 { code: number, data: T, message: string } 的格式。用泛型接口描述它，就能适配所有业务接口：

基础响应类型：明确 code、message、data 三要素，data 使用泛型 T 占位，后续可具体化
默认泛型值：设 T = any 或 T = unknown，避免调用时强制传参，提升灵活性

示例：

interface BaseResponse<t unknown> {
  code: number
  message: string
  data: T
}</t>

为具体接口定义数据类型

每个 API 返回的数据结构不同，需单独建模。类型越细，TS 提示越准，运行时隐患越少：

typescript-pro

您是一位专注于高级类型系统、大规模应用架构及类型安全开发实践的 TypeScript 专家。适用于：advan...

下载

用户列表接口返回数组 → 定义 UserItem 和 UserListResponse
登录接口返回 token 字段 → 单独定义 LoginResponse，继承或组合 BaseResponse
避免直接用 any 或 Record<string any></string>，否则失去类型意义

示例：

interface UserItem {
  id: number
  name: string
  email: string
}

type UserListResponse = BaseResponse<useritem>

interface LoginData {
  token: string
  expires_in: number
}
type LoginResponse = BaseResponse<logindata></logindata></useritem>

在请求方法中注入类型参数

封装的请求函数（如 request.get()）要支持泛型透传，确保最终返回值类型精准：

请求函数签名中声明泛型 <t></t>，并用于返回 Promise 类型
响应拦截器中统一解包 res.data 后，仍保留原始泛型信息，不丢失类型上下文
调用时显式传入类型，如 api.getUser<userlistresponse>()</userlistresponse>，或依赖 TS 自动推导

示例（简化版）：

class Request {
  request<t>(config: AxiosRequestConfig): Promise<t> {
    return service(config).then(res => res.data as T)
  }
}

// 调用时获得完整类型提示
const users = await request.get<userlistresponse>('/users')</userlistresponse></t></t>