va-load

作用

该插件基于 Vue2.X 通过对 axios 、 vant-loading 二次封装，每次HTTP请求自动拉起/隐藏 vant-loading

从性能优化角度考虑，vant-loading 为按需加载，只有当第一次发送请求时加载。同时对 vant-loading 单例化，每次加载、生成、渲染组件都会使用缓存。

使用

• 安装

  npm i axios Vue@2 va-load
  

• 注册依赖

  import Vue from 'vue'
  import axios from 'axios'
  import httpReq from 'va-load'
  
  // 注册  
  httpReq.install(Vue,axios)
  

举个栗子

• 接口模块

  // src/api/index.js
  import Vue from 'vue'
  import axios from 'axios'
  import httpReq from 'va-load'
  
  // 注册  
  httpReq.install(Vue,axios)
  
  let BASEURL = "http://localhost:3005/"
  const homeInit = (params = {}) => {
    return httpReq({
      url: `${BASEURL}init.do`,
      params
    })
  }
  
  const pageApi = { homeInit }  
  
  // 将页面的所有接口挂载到Vue原型上
  export default {
    install(Vue) {
      Vue.prototype.$API = pageApi
    }
  }
  

• 项目入口

  // src/main.js
  import api from './api/index.js'
  // 安装api模块
  Vue.use(api)
  

• 使用插件

  // src/views/home.vue
  export default {
    name: 'Home',
    mounted() {
        this.init()
    },
      methods:{
          init() {
              this.$API.homeInit().then(res=>{
      			...
              })
              
          }
      }
  }