Processamento de carregamento em várias solicitações de axios para projetos Vue

Em geral, combinar o interceptor axios no vue para controlar a exibição e o fechamento do carregamento é assim:
configurar um carregamento global no App.vue.

<div class="app">
   <keep-alive :include="keepAliveData">
       <router-view/>
   </keep-alive>
   <div class="loading" v-show="isShowLoading">
       <Spin size="large"></Spin>
   </div>
</div>

Defina também o interceptor do axios

// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
    
    
    this.isShowLoading = true
    return config
}, error => {
    
    
    this.isShowLoading = false
    return Promise.reject(error)
})

// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
    
    
    this.isShowLoading = false
    return response
}, error => {
    
    
    this.isShowLoading = false
    return Promise.reject(error)
})

A função deste interceptor é abrir o carregamento antes da requisição, e fechar o carregamento quando a requisição terminar ou ocorrer algum erro.
Isso funciona bem se houver apenas uma solicitação por vez. Mas se houver várias solicitações simultâneas ao mesmo tempo, haverá problemas.

Exemplo:

Se duas requisições forem iniciadas ao mesmo tempo, antes da requisição, o interceptor this.isShowLoading = true abrirá o carregamento.
Um pedido está agora fechado. this.isShowLoading = false O interceptor fecha o carregamento, mas outra requisição não termina por algum motivo.
A consequência é que a solicitação da página não foi concluída, mas o carregamento foi encerrado, e o usuário pensará que o carregamento da página foi concluído, mas a página não pode ser executada normalmente, resultando em uma experiência ruim para o usuário.

Solução
Adicione uma variável loadingCount para contar o número de solicitações.

loadingCount: 0

Adicione mais dois métodos para aumentar ou diminuir loadingCount.

methods: {
    
    
   addLoading() {
    
    
      this.isShowLoading = true
      this.loadingCount++
   },
 
  isCloseLoading() {
    
    
       this.loadingCount--
       if (this.loadingCount == 0) {
    
    
          this.isShowLoading = false
      }
  }
}

Agora o interceptador fica assim:

// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
    
    
    this.addLoading()
    return config
}, error => {
    
    
    this.isShowLoading = false
    this.loadingCount = 0
    this.$Message.error('网络异常，请稍后再试')
    return Promise.reject(error)
})

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

A função deste interceptador é:
sempre que uma requisição é iniciada, o carregamento é habilitado, e loadingCount é incrementado em 1;
sempre que uma requisição termina, loadingCount é decrementado em 1, e é julgado se loadingCount é 0, e se for 0, em seguida, o carregamento é encerrado;
isso pode resolver o problema Sob várias solicitações, uma solicitação termina antecipadamente, fazendo com que o carregamento seja fechado.