vue+axios+element ui 实现全局loading加载

**

vue+axios+element ui 实现全局loading加载标题

**

实现全局loading加载

我们只需要在请求发起的时候开始loading在这里插入代码片，响应结束的时候关闭loading

/**
 * http拦截器配置
 * this.$store.commit("a", 'b');   a=参数名   b=参数值
 * this.$store.state.task.selectComplete.selections;   取值示例
 */
import Vue from 'vue'
// 引入axios以及iview中的 Spin 和 Message 组件
import axios from 'axios'
import { Spin, Message } from 'view-design'
// 超时时间
axios.defaults.timeout = 150000;
axios.defaults.baseURL = '/api/';
axios.defaults.showLoading = true;
axios.defaults.aaa = 'true';
axios.defaults.withCredentials = true; //意思是携带cookie信息,保持session的一致性

let loading        //定义loading变量

function startLoading () {    //使用 iview show 方法
    loading = Spin.show({
        render: (h) => {
            return h('div', [
                h('Icon', {
                    'class': 'demo-spin-icon-load',
                    props: {
                        type: '.............',
                        size: 18
                    }
                }),
                h('div', 'Loading')
            ])
        }
    })
}
function endLoading () {    //使用 iview hide 方法
    Spin.hide()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }
    needLoadingRequestCount++
}

export function tryHideFullScreenLoading () {
    if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}