axios如何自定义实例且全局使用？

Question

main.js：

import Vue from 'vue'
import router from './router/router.js'
import store from './store/store.js'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'
import Qs from 'qs'
Vue.prototype.$qs = Qs

let backStage = axios.create({
  baseURL: 'xxx',
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type':'application/x-www-form-urlencoded',
  }
})

Vue.use(VueAxios,axios);

如上创建了axios的自定义实例，那么我要怎么全局使用这个自定义的实例？
是挂载在vue或者axios的原型上还是有别的更好的方法

Answer 1

1.直接挂载到原型上
Vue.prototype.$http=axios
这种方式小型项目使用为佳。
2.写个模块组件 request.js 进行封装

import axios from 'axios'；

exports.install = function (Vue, options) {
   Vue.prototype.$http = function (){
         //这里用于自定义封装axios
         //可同时通过this来调用已经加载的其他比如UI框架服务方式的组件
    };
};

然后在 main.js 引入使用

import request from './request' //引入

Vue.use(request) //将全局函数当做插件来进行注册

1、2两种方式都是挂在原型上，组件里直接 this.$http() 来使用，两者适用范围差不多。
3.不挂载到原型，直接抽离出api层并对请求进行封装，每个组件独单引用，这个适用于长期维护/中大型项目

Answer 2

建议新增api.js 创建实例之后export 需要使用时 import即可

Answer 3

单独放一个文件

export const $api=api;
export default Vue => {
Vue.prototype.$api=api

main里面

Vue.use(require("路径/api").default)

其他js里面

import {api} from '路径/api'