如何优化代码中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中调用

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中使用