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,允许模块自定义参数结构

相关推荐
excel3 分钟前
Nuxt 3 + PWA 通知完整实现指南(Web Push)
前端·后端
yuanmenglxb20048 分钟前
构建工具和脚手架:从源码到dist
前端·webpack
rit843249917 分钟前
Web学习:SQL注入之联合查询注入
前端·sql·学习
啃火龙果的兔子26 分钟前
Parcel 使用详解:零配置的前端打包工具
前端
Lsx_38 分钟前
MultiRepo 和 Monorepo:代码管理的演进与选择
前端·javascript·架构
潘多编程1 小时前
构建企业级Web应用:AWS全栈架构深度解析
前端·架构·aws
裕波1 小时前
Vue 与 Vite 生态最新进展:迈向一体化与智能化的未来
前端·vue.js
destinying1 小时前
当部分请求失败时,前端如何保证用户体验不崩溃?
前端·javascript·程序员
onelafite1 小时前
京东商品销量数据如何获取?API接口调用操作详解
api
幼儿园技术家1 小时前
Diff算法的简单介绍
前端