Vue公共loading升级版解决思路(处理并发异步差时响应)

let apiStatusList ={
  '/api/a':true,//true请求中
  '/api/b':false //false请求完成
}

import { defineStore } from 'pinia';
export const useLoadStore = defineStore('storeLoading', {
  state: () => {
    return {
      apiStatusList:{},
      loading:false, //网络加载状态，true加载中
    };
  },
  actions: {
    updateLoadingState(value){
      this.loading = value
    },
    setApiStatusList(value){
      this.apiList = value;
    }
  }
});

import axios from 'axios';
import { useLoadStore } from '../stores/loading';
const request = axios.create();
//请求拦截
request.interceptors.request.use(
  (config) => {
    //公共loading
    const loadStore = useLoadStore();
    let statusList = { ...loadStore.apiStatusList };
    statusList[config.url] = true; //接口赋值为请求中
    loadStore.setApiStatusList(statusList);
    if (!loadStore.loading) {  //判断loading是否正在展示中
      loadStore.updateLoadingState(true);
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
)
//响应拦截
request.interceptors.response.use(
  (response) => {
    const loadStore = useLoadStore();
    let statusList = { ...loadStore.apiStatusList };
    statusList[response.config.url] = false;  ////接口赋值为请求完成
    if (!Object.values(statusList).includes(true)) { //遍历对象，判断接口是否全部返回
      if (loadStore.loading) {
        loadStore.updateLoadingState(false);
        loadStore.setApiStatusList({});
      }
    } else {
      loadStore.setApiStatusList(statusList);
    }
  }，
  (error) => {//有接口报错，重置loading
    const loadStore = useLoadStore();
    if (loadStore.loading) {
      loadStore.updateLoadingState(false);
      loadStore.setApiStatusList({});
    }
  }
）

//监听store状态值时需要传入function
watch(()=>loadStore.loading,(newValue, oldValue)=>{
  if(newValue){
    showLoadingToast({
      duration: 0,
      forbidClick: true,
    });
  }else{
    closeToast();
  }
})