Vue3项目中优雅封装API基础接口:getBaseApi设计解析

在Vue3前端项目中,高效管理API接口是提升开发效率的关键。本文将介绍一种优雅的API基础封装方案------getBaseApi方法,它可以通过​​单次配置​​生成完整的CRUD接口模板,显著减少重复代码并强化类型安全。

设计目标

  1. 标准化接口规范:统一接口路径与方法命名
  2. 类型安全:通过TypeScript泛型支持自定义数据类型
  3. 灵活扩展:允许不同模块覆盖默认参数类型
  4. 开箱即用:5秒生成完整CRUD接口集合

apis目录结构

js 复制代码
apis
  --user
    --index.ts
    --type.ts
  --dept
    --index.ts
    --type.ts
js 复制代码
// @/apis/user/index.ts
import type * as T from './type'
import { getBaseApi } from '@/apis/base'
import http from '@/utils/http'

export type * from './type'

/** 用户模块 */
export const baseAPI = getBaseApi<T.ListItem>({ baseUrl: '/user' })

// 其他接口
export const getUserRoleList = (params: { id: string }) => {
  return http.get<PageRes<T.UserRoleListItem[]>>('/user/getUserRoleList', params)
}
js 复制代码
// @/apis/user/type.ts

export interface ListItem {
  id: string
  name: string
  account: string
  avatar: string
  gender: Gender
  phone: string
  email: string
  createTime: string
  address: string
  proportion: number
  status: Status
  hobbys: string[]
}

export interface UserRoleListItem { ... }

上面代码没有使用export default,是因为对Tree Shaking不友好

使用

js 复制代码
import { baseAPI, getUserRoleList } from '@/apis/user'
import type * as T from '@/apis/user' // 获取类型

const userList = ref<T.ListItem[]>([])

// 获取列表
baseAPI.getList({ page: 1, size: 10 })
// 获取详情
baseAPI.getDetail({ id: 'xxx' })
// 新增
baseAPI.add(formData)
// 编辑
baseAPI.update(formData)
// 删除
baseAPI.delete({ ids: ['xx1', 'xx2'] })

使用baseAPI都会有类型提示

类型覆盖

核心代码解析

js 复制代码
interface DefaultP {
  GetListParams?: Record<string, any>   // 分页查询参数
  GetDetailParams?: { id: string }      // 详情查询参数
  AddParams?: Record<string, any>       // 新增参数
  UpdateParams?: Record<string, any>    // 更新参数
  DeleteParams?: { ids: string[] }      // 删除参数
}

export function getBaseApi<T, P extends DefaultP = DefaultP>(
  params: { baseUrl: string }
) {
  const { baseUrl } = params;

  return {
    // 获取分页列表
    getList(params?: P['GetListParams']) {
      return http.get<PageRes<T[]>>(`${baseUrl}/getList`, params)
    },
    
    // 获取详情
    getDetail(params: P['GetDetailParams']) {
      return http.get<T>(`${baseUrl}/getDetail`, params)
    },
    
    // 新增数据
    add(params: P['AddParams']) {
      return http.post<T>(`${baseUrl}/add`, params)
    },
    
    // 修改数据
    update(params: P['UpdateParams']) {
      return http.post<T>(`${baseUrl}/update`, params)
    },
    
    // 批量删除
    delete(params: P['DeleteParams']) {
      return http.post<boolean>(`${baseUrl}/delete`, params)
    }
  }
}

T:定义核心数据类型

P:继承默认参数类型DefaultP,允许模块自定义参数结构

相关推荐
江城开朗的豌豆1 分钟前
点击弹窗外部自动关闭?一个useRef Hook就搞定!
前端·javascript·react.js
JarvanMo17 分钟前
跨平台开发的隐性成本
前端·后端
qq_4152162523 分钟前
html pc和移动端共用一个页面,移动端通过缩放达到适配页面,滚动飘窗
前端·html
前端小巷子39 分钟前
watch 与 computed:Vue3响应式的抉择
前端·vue.js·面试
ss2731 小时前
手写MyBatis第36弹:MyBatis执行流程中SQL命令类型解析
前端·javascript·html
用户6120414922131 小时前
springboot+vue3做的图书管理与借阅系统
vue.js·spring boot·后端
IT_陈寒1 小时前
Python数据处理太慢?这5个Pandas优化技巧让速度提升300%!
前端·人工智能·后端
花落文心2 小时前
使用 html2canvas + jspdf 实现页面元素下载为pdf文件
前端·javascript·pdf
掘金安东尼2 小时前
🚀 6 行 HTML,让应用瞬间“起飞”:Speculation Rules API 全解析
前端·api·浏览器
望获linux3 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php