在vue开发过程中，有时候一个页面使用到很多接口，如果每个接口都是用import {xx,xx,xx} from 'xxxxx'这样的方式引入调用，显得有些麻烦。能使用this.xxx.xxx这样的方式调用显得简单一些。this.xx.xx这样的方式调用的原理是把接口暴露在vue的原型上，现在就可以通过this的方式调用，this.xx是为了统一一下，api都用同一个vue的一个属性包装调用。
全局的接口文件global.js
// 封装好的axios.js
import { axiosPost } from '../utils/axios'
// 接口地址
import { Global } from '../config/config.url'
/**
* 上传文件
* @param {String} file 文件对象
*/
export function fileUpload (file) {
let formData = new FormData()
// 上传文件参数
formData.append('file', file)
return axiosPost(Global.fileUpload, formData, true, false, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
把创建好的每个模块的接口文件引入接口全局文件
一、js版本
// 接口全局文件/api/index.js
全局注册组件
import * as global from './global'
const API = {
global,
}
export default {
install (Vue) {
Vue.prototype.$api = API
},
...API
}
一、ts版本
// 接口全局文件/api/index.js
全局注册组件
import { ApiType } from './index.d'
import * as global from './global'
const API = {
global
}
declare module 'vue/types/vue' {
interface Vue {
$api: ApiType;
}
}
const ApiPlugin: PluginObject<Vue> = {
install (Vue) {
Vue.prototype.$api = API
},
...API
}
export default ApiPlugin
在/api/index.d.ts文件中定义ts的接口
import { AxiosPromise } from 'axios'
interface Global {
fileUpload: (file: File) => AxiosPromise;
xxx: (data: any) => any;
xx: (data: any) => any;
}
// 接口对应的字段映射，方便调用的时候，有提示选择
export interface ApiType {
global: Global;
}
在main.js中直接用引用并Vue.use进行注册，装载
import Vue from 'vue'
import API from './api'
Vue.use(API)
