vue使用axios请求等待所有请求完成loading消失的4个方法

方法1，以事件总线方式创建拦截器，待所有事件请求结束消失loading

创建事件总线：

import Vue from 'vue'
var _bus = new Vue()  // 创建一个事件总线
var num = 0
axios.interceptors.request.use(function (config) {  //在请求发出之前进行一些操作
    num++
    _bus.$emit('showloading')
    return config
  }

axios.interceptors.response.use(response => {        // 接受请求后num--，判断请求所有请求是否完成
    num--
    if (num <= 0) {
      _bus.$emit('closeLoading')      
    } else {
      _bus.$emit('showloading')      
    }
  })
export var bus = _bus   //暴露事件总线

总线调用：

improt {bus} form xxx.js
created(){
 var _this = this
 bus.$on('showloading',function(){
    _this.showloading = true    // loading出现
 })
 bus.$on('closeLoading',function(){
    _this.showloading = false   // loading消失
 })
}

方法2，直接在封装的axios.js中拦截，原理跟方法1一样

let requestingCount = 0;

const handleRequestLoading = () => {
  if (!requestingCount)  startLoading()
  requestingCount++
}
const handleResponseLoading = () => {
  requestingCount--
  if (!requestingCount)  stopLoading()
}

axiosInstance.interceptors.request.use(config => {
    handleRequestLoading()
  },() => {
    handleResponseLoading()
  })

axiosInstance.interceptors.response.use(response => {
    handleResponseLoading()
  }, error => {
    handleResponseLoading()
  })

方法3，使用Promise.all方法调用封装的axios请求

具体如何使用参考https://blog.csdn.net/weixin_36185028/article/details/102394378

let p1 = new Promise((resolve, reject) => {
    resolve(1);
})
let p2 = new Promise((resolve, reject) => {
    resolve(2);
})
let p3 = new Promise((resolve, reject) => {
    resolve(3);
})
Promise.all([p1, p2, p3]).then(values => { 
    console.log(values); 
});

方法4，axios.all方法

官方例子：

function getUserAccount() {
return axios.get('/user/12345');
}

function getUserPermissions() {
return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {

// Both requests are now complete
}));

参考来源：https://segmentfault.com/q/1010000012271633/