导言

此方法适用于VueJS，Vue3.x目前还没开始尝试。后续若有尝试，会一并更新。此方案主要是提升项目的可维护性，以及代码的可读性。

具体操作

• src/init/initAPI.js

个人习惯问题，我喜欢把项目初始就要配置好的东西都丢到init下。

import Vue from 'vue'

const api = {}

/**
 * 深度赋值属性
 *
 * @param {*} obj
 * @param {*} path
 * @param {*} value
 * @returns
 */
function property(obj, path, value) {
  if (path.indexOf('/') >= 0) {
    const list = path.split('/')
    const key = list[0]
    list.splice(0, 1)
    let newPath
    if (list.length <= 1) {
      newPath = list[0]
    } else {
      newPath = list.join('/')
    }
    obj[key] = obj[key] || {}
    property(obj[key], newPath, value)
  } else {
    obj[path] = value
    return obj
  }
}

const apiMethods = require.context(
  // 其filter目录的相对路径
  '../api',
  // 是否查询其子目录
  true,
  // 匹配基础filter包名
  /\w+\.js$/
)
apiMethods.keys().forEach(fileName => {
  // 获取api包名
  const apiMethod = apiMethods(fileName)
  // 剥去文件名开头的 `./` 和结尾的扩展名
  const apiName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  const func = apiMethod.default || apiMethod
  property(api, apiName, func)
})

Vue.prototype.$api = api

• 子级API文件

export default {
  xxxxx(params){
    return axios.xxx(url,params);
  }
}

• main.js

import "./init/initAPI`

• Vue文件

const res = await this.xxx(文件名).xxx(方法名)(params);