• 在api目录下新建文件http.js

// 接口位置
import Api from './api.js'
import store from '@/store/store.js'
import router from "@/router/index"
import {baseUrl} from '@/config/env.js'
// 设置接口url域名和端口，超时断开连接
axios.defaults.baseURL = baseUrl
axios.defaults.timeout =  15000// 请求拦截(请求携带token)
axios.interceptors.request.use(config => {if (store.getters.getUser.accessToken) {  // 判断是否存在token，如果存在的话，则每个http header都加上tokenconfig.headers.accessToken = store.getters.getUser.accessToken}return config;},err => {return Promise.reject(err)
})// 响应拦截,对返回的状态码判断和进行一些操作
axios.interceptors.response.use(response => {if(response.data.status===401) {store.dispatch('delUser')router.push({path:'/login'})} else if (response.data.status===403) {router.push({path:'/error/403'})} else if(response.data.status===500) {router.push({path:'/error/500'})}if (response.status !==200 || response.data.status !==200) {Vue.prototype.$message({type: "error",message: response.data.errorMsg ? response.data.errorMsg : response.statusText})}return response},error => {return Promise.reject(error)
})export default (function(){// 包含所有请求方法的构造函数function _Http(){}// 获取接口名字（截取接口/最后）http.getName = function(url){let list = url.split('/')return list[list.length-1]}// 包含所有请求和状态的实例对象function http(url = Api){var _httpob = new _Http()url.map(item => {let name = http.getName(item.url)_httpob[name+'Status'] = 1_httpob[name] = function(val = {}) {return _httpob.sendMsg(item.url,val,item.method)}})return _httpob}// axios请求的封装_Http.prototype.sendMsg = function(url,value = {},method ='post') {let name = http.getName(url)var status = {get:() => {return axios.get(url,{params:value}).then(res => {this[name + 'Status'] = 1return res}).catch( res => {Vue.prototype.$message.warning('网络出现问题，请稍后重试')} )},post:() => {return axios.post(url,value).then(res => {this[name+ 'Status'] = 1return res}).catch( res => {Vue.prototype.$message.warning('网络出现问题，请稍后重试')})}}if(this[name+ 'Status']) {this[name + 'Status'] = 0return status[method]()} else {return new Promise(reject => {reject({status:40001})})}} return http
})()
复制代码

这样子封装后_httpob对象里面就包含了所有请求方法和状态属性name+Status，这个属性是为了防止频繁调用接口，保证只有在接口返回response后才能再次调用

• 接下在再api目录下新建Api.js用来存放接口,类似这样

// 接口（如果是post请求method属性可省略）
const mockApi = [{url:'/api/web/getEchartsData',method:'get'}
]
export default mockApi
复制代码

这样不出意外_httpob里面就包含了getEchartsData(){}方法和getEchartsDataStatus属性

• 然后在main.js里面调用http()函数

import http from '@/api/http.js'
Vue.prototype.$axios = http()
复制代码

• 最后我们就可以在组件里面直接调用getEchartsData接口了

// value:需要传递的参数
this.$axios.getEchartsData(value).then(res => {console.log(res)
})
复制代码

大功告成，新手上路，不知道这样封装合不合适，大家多多指教哈哈