axios 多个请求loading管理

预期效果：多个请求并发时，所有请求完成后才关闭loading。

解决方案：增加一个 loadingCount 变量，用来计算请求的次数。

import Vue from 'vue'
import axios from 'axios'
const Loading = Vue.prototype.$loading;
const Message = Vue.prototype.$message;

var loadingCount = 0;
var loadingService = null

function addLoading() {
  if (!loadingService) {
    loadingService = Loading?.({
      fullscreen: true,
      background: 'transparent',
    });
  }
  loadingCount++
}
 
function isCloseLoading() {
  loadingCount--
  if (loadingCount == 0) {
    loadingService?.close();
  }
}

axios.interceptors.request.use(config => {
  addLoading()
  return config
}, error => {
  loadingService?.close();
  loadingCount = 0
  Message.error('网络异常，请稍后再试')
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(response => {
  isCloseLoading()
  return response
}, error => {
  loadingService?.close();
  loadingCount = 0
  Message.error('网络异常，请稍后再试')
  return Promise.reject(error)
})

这个拦截器的功能是：

• 每当发起一个请求，打开 loading，同时 loadingCount 加 1；

• 每当一个请求结束， loadingCount 减 1，并判断 loadingCount 是否为 0，如果为 0，则关闭 loading；

  这样即可解决多个请求下有某个请求提前结束，导致 loading 关闭的问题。