如何优化代码中api的请求结构

（注：下面以vue项目为例子）

一. 一般项目中api的调用方式

1. 目录结构

|── src
|── |── utils （工具方法文件夹）
|── |── |── http.js （封装的请求方法）
|── |── views （页面文件夹）
|── |── |── device （可以理解为一级菜单）
|── |── |── |── board（可以理解为二级菜单页面）
|── |── |── |── |── index.vue

2. 常见的api调用形式

第一步： 一般都会在http.js中封装好axios的get,post等方法，利用拦截器统一处理请求前和响应后的逻辑。
将http这个方法绑定在vue实例上,Vue.prototype.$http = http
第二步： 在上面index.vue中调用

<script>
export default {
  data () {
    return {
      data: ""
    }
  },
  methods: {
    async getData () {
    const { data } = await this.$https.get("/url/test")
    this.data = data
  }
 }
</script>

3. 问题

（1） 我们传入的后端地址"/url/test",如果要继续用到，我们还是要重复写一遍 this.$https.get("/url/test")；
（2） 当页面中有大量的接口调用就会出现接口地址不易管理的情况，这个能否新建一个文件统一管理？

二. 理想项目中的api组织结构(优化1)

1. 目录结构

我们应该有一个api文件夹，存放当前对应模块的接口
board.js 中是这样定义的

import { http } form '@/utils/http.js'
export default {
  getBoardData () {
    return http.get("/url/test")
  }
}

|── src
|── |── utils
|── |── |── http.js
|── |── views
|── |── |── device （可以理解为一级菜单）
|── |── |── |── board（可以理解为二级菜单页面）
|── |── |── |── |── index.vue
|── |── api
|── |── |── common (存放公共的方法)
|── |── |── |── index.js
|── |── |── device (一级菜单名)
|── |── |── |── board.js（二级菜单页面名字）
|── |── |── index.js

2. 调用

在 board的模块下的index.vue中使用

<script>
import boardApi from "@/api/device/board.js"
export default {
  data () {
    return {
      data: ""
    }
  },
  methods: {
    async getData () {
    const { data } = await boardApi.getBoardData()
    this.data = datad
  }
 }
<script>

3. 问题

(1) 每次都要import, 能不能用一个全局变量去加载这些接口文件，$service.getData()的形式

三 . 理想项目中的api组织结构(优化2)

1. webpack的require.context

通过 require.context() 函数来创建自己的 context。
可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

// 找出当前目录下包括子目录所有以.js结尾的文件
const files = require.context("./"，true, "\.js$") 

所以我们可以利用webpack的require.context得到我们的文件结构

2. 在api文件夹的index.js

|── src
|── |── utils
|── |── |── http.js
|── |── views
|── |── |── device （可以理解为一级菜单）
|── |── |── |── board（可以理解为二级菜单页面）
|── |── |── |── |── index.vue
|── |── api
|── |── |── common (存放公共的方法)
|── |── |── |── index.js
|── |── |── device (一级菜单名)
|── |── |── |── board.js（二级菜单页面名字）
|── |── |── index.js

// api文件的index.js
const files = require.context('./', true, /\.js$/)

const commonApis = {}

files.keys().forEach(key => { //require.context的 keys() 返回一个文件路径匹配数组
 
  if (key === './index.js') {
    return false
  }
  const arr = key.match(/\.\/(.*)\/(.*).js)
  /**
  * commonApis的结构
  * {
  *   device: {
  *     getBoardData () {}
  *   }
  *
  * }
  */
  commonApis[arr[1]] = { ...commonApis[arr[1]], ...files(key).default }
})
export default commonApis

3.调用

  //commonApis的结构
  {
   device: { // 一级菜单名
      getBoardData () {}
    }
  }

以上我们得到了一个commonApis的对象，我们得把它绑定在一个变量上,比如$service
所以需要在 vue.config.js 定义

const webpack = require('webpack')
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 调整 webpack 配置（放置plugins等）
  configureWebpack: {
    resolve: {
      alias: { // 给路径起别名
        service: resolve('src/api/index.js')
      }
    },
    plugins: [
      new webpack.ProvidePlugin({ // 自动加载模块的插件
        $service: ['service', 'default'],
      })
    ]
  }
}

这样就可以在board中index.vue中这样调用

<script>
export default {
  data () {
    return {
      data: ""
    }
  },
  methods: {
    async getData () {
    const { data } = await $service.device.getBoardData()
    this.data = data
  }
 }
</script>