基于vue-element-admin优化axios请求接口

前言

考虑到vue-element-admin的定位是后台集成方案，不太适合当基础模板来进行二次开发。根据官方推荐clone的基础模板vue-admin-template。下载打开后根据官方的目录结构，可以找到我们需要的如下目录，红框的就是这次要操作的文件。

官方api使用方式

官方user.js文件中其中一个接口代码：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

官方是在使用的具体组件处import，然后再调用对应方法，个人感觉太过繁琐。

import { login } from '@/utils/request'

login().then(res => {
  console.log(res)
}).catch(err) {
  console.log(err)
}

优化方案

依然遵循官方推荐的方案，每个模块对应一个api接口文件，但是这边做个api出口，挂载到vue原型上，直接通过this调用。

官方推荐根据业务模块来划分 views，并且 将views 和 api 两个模块一一对应，从而方便维护。

第一步，api目录新建一个home.js，作为home模块的api文件（图上蓝色的home和index就是我后面添加的）。

import request from '@/utils/request'

const home = {
  login(params) { //post请求事例
    return request.post('url', params)
  }
  // 其他接口…………
}

export default home

第二步，api目录新建一个index.js，作为所有api文件的导出出口。

/**

api接口的统一出口
*/
// 首页数据接口
import home from './home'
// import xxxx from './xxxx'
// 导出接口
export default {
  home,
  // xxxx
}

第三步，在main.js文件中把api挂载到vue原型上。

import api from '@/api/index.js'

Vue.prototype.$api = api

第四步，在需要使用的位置通过this.$api.xxx.xxxx调用。

this.$api.home.login().then(res => {
  console.log(res)
}).catch(err) {
  console.log(err)
}

最后，根据你的环境设置在对应环境配置文件设置baseUrl，再做相应调试即可。

VUE_APP_BASE_API = 'https://www.baidu.com'

参考文章

手摸手，带你用 vue 撸后台 系列一（基础篇）

vue中Axios的封装和API接口的管理