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

相关推荐
慧一居士24 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead26 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app