axios中如果又多个请求如何做到只执行一个loading效果

import NproGress from "nprogress";
import "nprogress/nprogress.css";
import axios from "axios";
const instance = axios.create({
    // baseURL: '',
    timeout: 5 * 1000,
})
// 创建一个变量来记录正在进行的请求数量
let httpcount = 0
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 如果当前没有其他请求在进行，则显示 loading 效果
    if (httpcount === 0) {
        // 显示 loading 效果的逻辑
    	// 开启进度条
    	NproGress.start();   
    }
    // 增加请求计数
    httpcount++
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 减少请求计数
    httpcount--
    // 如果当前没有其他请求在进行，则隐藏 loading 效果
    if (httpcount === 0) {
        // 隐藏 loading 效果的逻辑    
        // 关闭进度条
        NproGress.done();    
    }
    
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // 在响应错误的时候减少请求次数是为了确保计数器能够正确地反映当前正在进行的请求数量。当发生请求错误时，意味着当前的请求已经结束，因此需要将计数器中对应的请求数量减少，以便在后续逻辑中正确判断是否需要显示或隐藏 loading 效果。
	// 如果不在响应错误的时候减少请求次数，那么计数器就无法正确地反映当前的请求状态，可能会导致以下问题：
	// 当请求发生错误时，计数器没有减少，导致 loading 效果一直显示。
	// 在连续请求多次后，即使所有请求都已完成，但由于计数器没有正确减少，导致 loading 效果仍然显示。
 	// 因此，在响应错误的时候减少请求次数是为了保证计数器能够正确地反映当前的请求状态，从而正确控制 loading 效果的显示和隐藏。
  	// 减少请求计数
      httpcount--;
      // 如果当前没有其他请求在进行，则隐藏 loading 效果
      if (httpcount === 0) {
        // 隐藏 loading 效果的逻辑
        // 关闭进度条
        NproGress.done();   
      } 
    return Promise.reject(error);
  });