vue loading 多个ajax,vue多页面项目使用全局Loading组件

多页面vue应用中，在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。

由于多页面未使用vuex做状态管理，只在入口统一注册了bus，所以此例子使用eventbus做事件通信。

在Loading.vue中，一个简单的公共loading组件

这个loading组件用showLoading控制展示与否。

加载中...

Loading.vue中，用bus接收全局事件，控制组件的显示隐藏

用SHOW_LOADING和HIDE_LOADING事件控制组件的显示隐藏

import { Bus, SHOW_LOADING, HIDE_LOADING } from 'utils/bus'

export default {

name: 'loading',

data () {

return {

showLoading: false

}

},

created () {

this.loadingFn()

},

methods: {

loadingFn () {

Bus.$on(SHOW_LOADING, () => {

this.showLoading = true

})

Bus.$on(HIDE_LOADING, () => {

this.showLoading = false

}

},

}

ajax请求中统一做处理

以ajax请求为例，可以在beforeSend和complete钩子函数中emit对应的隐藏和显示事件。

new Promise((resolve, reject) => {

let defaultOpt = {

url,

type: config.method || 'POST',

data: params || {},

timeout: 50000,

contentType: 'application/x-www-form-urlencoded',

dataType: json

}

defaultOpt.beforeSend = (xhr, settings) => {

if(config.setLoad){

Bus.$emit(SHOW_LOADING)

} else {

Bus.$emit(HIDE_LOADING)

}

}

defaultOpt.complete = () => {

Bus.$emit(HIDE_LOADING)

}

$.ajax(defaultOpt)

})

将bus注册在多页面的应用的main.js中

由于每个页面都有可能用到这个效果，这时候会在全局注册一些公共的组件，这样哪个页面需要用到，不需要重新引入，直接调用组件即可。

import Vue from 'vue'

import App from './App.vue'

import bus from 'utils/bus'

import components from 'utils/components.js'

// 注册统一的bus应用

Vue.prototype.$bus = bus

// 全局注册组件

Vue.use(components)

new Vue({

render: h => h(App)

}).$mount('#app')

components.js里放置需要全局注册的组件

import Loading from 'components/Loading.vue'

export default (Vue) => {

Vue.component('Loading', Loading)，

// 其他组件

}

额外需要注意的

用的时候直接引入到需要的页面即可。

但是会有一个小小的问题，假设某个页面在created里就要请求接口，这时候Bus.$emit(SHOW_LOADING) 会无法被接收到。因为这时候Loading组件还未能加载完成，Bus.$on(SHOW_LOADING)还未能注册上。所以，临时的解决方案是将请求先放在mounted钩子里。