vue3+TS自动化封装全局api

最近在项目里，写了一个自动化注入所有的api的脚本，为了解决每次调请求时都要从api文件里引入，即使引入了一个api，也会把整个文件导入，从而导致打包体积变大

封装之前使用：

import { goodsManageAdd, goodsManagePackageUnitFindDropDown, goodsManagePackageUnitDetail } from '@/api/module/goodsManageList_api'


const { Success } = await goodsManageAdd(addGoodsParams)
  if (Success) {
    globalProperties.$message.success('添加成功')
    httpTableData.value = []
    addForm.value.resetFields()
    router.push({ name: 'goodsManageList' })
  }

封装后调用请求：

   import { getCurrentInstance } from 'vue'
// vue3全局对象
const {
  appContext: {
    config: { globalProperties },
  },
}: any = getCurrentInstance()

// 调用api无需再引入请求，直接挂载到了全局使用即可
const { Success } = await 
  globalProperties.$api.goodsManageList_api.goodsManageAdd(addGoodsParams)
  if (Success) {
    globalProperties.$message.success('添加成功')
    httpTableData.value = []
    addForm.value.resetFields()
    router.push({ name: 'goodsManageList' })
  }

接下来介绍一下项目文件：

src下面的index封装了自动化导入工具，instaceHttp封装了axios，modules放的是业务请求

 

src=> api => index.ts 
/**
 * @method 自动化注册api并导出
 * @returns 所有的api模块，在main.ts里导入使用
 */

// 引入所有的api.ts模块
const files = import.meta.globEager('./module/*.ts')
const models: any = {}
for (const key in files) {
  try {
    const keys = {}
    for (const v in files[key]) {
      Object.assign(keys, { [v]: files[key][v] })
    }
    models[key.replace(/(\.\/module\/|\.ts)/g, '')] = keys
  } catch {
    throw new Error(`${key}模块导出失败`)
  }
}
export default models


src=> main.ts =>
import { createApp } from 'vue'
import api from '@/api'

const app = createApp(App)
app.config.globalProperties.$api = api
// 类似于vue的
Vue.prototype.$api = api;