利用插件的思想去统一管理axios网络请求

api.js

// api.js
import login from './login'; // login页面所有的aixos请求封装在此
import home from './home'; // home页面的所有请求封装在此
import detail from './detail'; // 详细页面的请求封装在此

const apiList = {
  ...login,
  ...home,
  ...detail,
};

const install = (Vue) => {
  if (install.installed) return;
  install.installed = true;

  /* 定义属性到Vue原型中
  这样每一个组件就可以通过this.$api.xxx(data) 去发送请求
  */
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiList;
      },
    },
  });
};
// 导出一个对象，里面有install方法。install方法里就把$api代理到Vue中
export default {
  install,
};

main.js

import apis from './apis';
Vue.use(apis);
new Vue(参数);