[JavaScript知识库]封装AxiosAPI引入麻烦问题

假如我们封装了一个Axios的APi，但是每次我们引入都需要导入，这就会特别麻烦。

这个时候我就会想，有没有什么办法，可以把自己写的APi直接全部导入，然后用的时候直接用，就不用再麻烦去导入了。

然后我就想到了vue的原生链prototype。话不多说，咱们直接上代码

//此时 我们封装的API里面有众多接口，我就列一个，方便演示使用
export const login = (params) => request.post('/user/passport/login', params)

这个时候我们在main.js里面将APi进行全局导入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 同一样式，引入所有的APi
import * as API from '@/API/getDate'
console.log(API);//这里打印的值就是所有的APi接口了

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
  //在声明周期加载之前，把$API挂载到原生链上
  beforeCreate() {
    Vue.prototype.$API = API;
  }
}).$mount('#app')

那么改如何使用呢，这就很简单啦

async loginIn() {
  const { data: res } = await this.$API.login(this.form);
},