va-load

作用

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

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

使用

- 安装

``js
npm i axios Vue@2 va-load
`

- 注册依赖

`js
import Vue from 'vue'
import axios from 'axios'
import httpReq from 'va-load'

// 注册
httpReq.install(Vue,axios)
`

举个栗子

- 接口模块

`js
// 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
}
}
`

- 项目入口

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

- 使用插件

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

}
}
}
``