背景
業務需求是這樣子的，每當發請求到後端時就觸發一個全屏的 loading，多個請求合併為一次 loading。
現在專案中用的是 vue 、axios、element等，所以文章主要是講如果使用 axios 和 element 實現這個功能。

效果如下：

要點分析=重點
首先，請求開始的時候開始 loading， 然後在請求返回後結束 loading。重點就是要攔截請求和響應。
然後，要解決多個請求合併為一次 loading。
最後，呼叫element 的 loading 元件即可。

程式碼塊

import axios from 'axios';
import { Message, Loading } from 'element-ui';
import Cookies from 'js-cookie';
import router from '@/router/index'
let loading        //定義loading變數
function startLoading() {    //使用Element loading-start 方法
    loading = Loading.service({
        lock: true,
        text: '載入中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
function endLoading() {    //使用Element loading-close 方法
    loading.close()
}
//那麼 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()
    }
}

//http request 攔截器
axios.interceptors.request.use(
    config => {
        var token = ''
        if(typeof Cookies.get('user') === 'undefined'){
            //此時為空
        }else {
            token = JSON.parse(Cookies.get('user')).token
        }//注意使用的時候需要引入cookie方法，推薦js-cookie
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type':'application/json'
        }
        if(token != ''){
          config.headers.token = token;
        }
        showFullScreenLoading()
        return config;
    },
    error => {
        return Promise.reject(err);
    }
);
//http response 攔截器
axios.interceptors.response.use(
    response => {
        //當返回資訊為未登入或者登入失效的時候重定向為登入頁面
        if(response.data.code == 'W_100004' || response.data.message == '使用者未登入或登入超時，請登入！'){
            router.push({
                path:"/",
                querry:{redirect:router.currentRoute.fullPath}//從哪個頁面跳轉
            })
        }
        tryHideFullScreenLoading()
        return response;
    },
    error => {
        return Promise.reject(error)
    }
)