vue 项目接口api批量挂载到vue实例上

在项目开发中，每个页面都需要调用许多接口请求的接口api

之前我们项目开发的api导入方式

import { hSearch,hAdd,hDel } from './xxxx/xxxx'

这种引入方式，每个接口api都需要一个一个导入，不仅效率很低，代码结构也显得特别冗余，有两种批量挂载vue方式，可以根据自己的需求自行选择

api目录结构：api文件夹 ——> 各模块文件夹 ——> 页面的.js文件

一、直接在main.js引入，进行挂载

1. 使用require.context批量引入api下的所有js文件

   // 三个参数分别为：
   1、表示检索的目录；2、表示是否检索子文件夹；3、匹配文件的正则表达式
   const apis = require.context('@/api', true, /.js$/)`
   

   如果想要过滤index.js，可以把正则改为 /^((?!index).)*.js$/

2. vue原型新增空对象

   Vue.prototype.$API = {}
   

3. 遍历挂载到vue原型上

   apis.keys().forEach(item => {
     for (var key in apis(item)) {
       // 判断是否有重复的api接口名
       if (Vue.prototype.$API[key]) {
         Promise.reject(`相同接口名：${key}`)
       }
       Vue.prototype.$API[key] = apis(item)[key]
     }
   })
   

   • apis.keys() ：遍历出来的是导入的所有.js文件的路径
   • key：所有api的名称
   • apis(item) ：.js文件
   • apis(item)[key]：所有.js文件中的api接口函数

4. 页面调用

   this.$API.接口名()
   

   注意：api接口名不要出现相同的，避免后续调用时出现错误

二、每个js文件单独导出后挂载

1. 每个页面文件下新建index.js src / api / system / index.js
javascript import * as role from "./role" import * as log from "./log" export { role,log }
   将文件中的.js文件导入，设置别名后导出

2. api文件夹下新建index.js文件 src / api / index.js

   import Vue from 'vue'
   import * as login from './login'
   import * as stting from './stting'
   import * as menu from './menu'
   import * as system from './system'
   const api = {
       login,
       stting,
       menu，
   	system
   }
   Vue.prototype.$API = api
   

   在api / index.js中引入后，挂载到vue原型上

3. 在main.js中引入

   import '@/api'
   

4. 页面中调用

   this.$API.system.接口名()
   

这种导出的好处是，在调用时，增加了文件夹名称，就避免了因为api接口名相同，导致后续出现调用接口错误问题