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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui