vue項目elementUI框架中，在封裝的axios中添加loading，多個axios請求，一次性loading

vue項目，用的框架是elementUI，現在要在項目的所有頁面中加上loading，請求用的是axios，且進行了封裝，查了一下記錄，特此記錄一下親測可用，歡迎大家一起交流

實現原理：設置一個計數，開始調用為0，展示正在加載中，多個接口一起調用，累加，調用一個接口完成減1，當減到0時，完成最后一個接口調用，關閉正在加載中遮罩。

因為我是把axios封裝在一個api.js里面，所以我是在api.js里面寫的代碼

代碼如下：

import axios from 'axios';
import Vue from 'vue'
import { Message, Loading  } from 'element-ui';
import _ from 'lodash';

// loading框設置局部刷新，且所有請求完成后關閉loading框
let loadingInstance; //loading 實例
let needLoadingRequestCount = 0; //當前正在請求的數量

function showLoading() {
  let main = document.querySelector('#app')        //獲取dom節點
  if (main) {
     if (needLoadingRequestCount === 0 && !loadingInstance) {
        loadingInstance = Loading.service({ 
          target: main, text: '正在加載...', background: 'rgba(0,0,0,0.6)', spinner: 'el-icon-loading'
        });
     }
     needLoadingRequestCount++;
  }
  // console.log('111111111',needLoadingRequestCount)
}
function closeLoading() {
  Vue.nextTick(() => { // 以服務的方式調用的 Loading 需要異步關閉
     needLoadingRequestCount--;
     needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 保證大於等於0
     if (needLoadingRequestCount === 0) {
        if (loadingInstance) {
           hideLoading()
        }
     }
    //  console.log('22222222222',needLoadingRequestCount)
  });
}
//防抖
var hideLoading = _.debounce(() => {
  loadingInstance.close();
  loadingInstance = null;
},10);


//http request 攔截器
axios.interceptors.request.use(
  config => {
    showLoading()// 這里需要注意，必須return config才能生效
    return config;
  },
  error => {
    closeLoading() return Promise.reject(err);
  }                        
);


//http response 攔截器
axios.interceptors.response.use(
  response => {
    closeLoading()return response;
  },
  error => {
    closeLoading() return Promise.reject(error)
  }
)