Solution ideas for Vue public loading upgraded version (response when dealing with concurrent asynchronous differences)

Public loading is a very common scenario in the project system, and the processing method is nothing more than three steps:
1. Define status values ​​(vuex, pinia, etc.) through global status management.
2. Listen to the change of state value in the main entrance of the program, thereby displaying/hiding laoding animation.
3. Change the status value in the request and the corresponding interceptor.

The first and second steps are similar, but in the third step, the method shared by many blog posts on the Internet is: display loading in request interception, and directly hide loading when it is judged in the response interceptor that a successful response is received. This method seems feasible but has problems in the actual process.For example, suppose that two asynchronous requests A and B are sent to the background at the 0th second, due to different network or processing logic, A request receives a successful response in 0.5 seconds, and B request only receives 2 seconds. At 0.5 seconds, the response interceptor will change the loading status and end the loading animation, but at this time the B request has not received a return. If the user's next operation requires data requested by A and B at the same time, ending the animation early will make the user's physical examination worse.

Solution:
Define a global object to store the response status of each interface. The state will not be changed until each requesting interface receives a response, ending the loading animation. Because of the uniqueness of the key name, the interface path (or unique interface number) can be used as the key name. Add a key-value pair when requesting, change the key-value when responding, and traverse the object state value for judgment

let apiStatusList ={
  '/api/a':true,// True request  '/api/b':false //False request completed}

The specific operation is as follows (taking vue3's pinia as an example):
Define a

import { defineStore } from 'pinia';
export const useLoadStore = defineStore('storeLoading', {
  state: () => {
    return {
      apiStatusList:{},
      loading:false, //Net loading status, true loading    };
  },
  actions: {
    updateLoadingState(value){
       = value
    },
    setApiStatusList(value){
       = value;
    }
  }
});

Interceptor processing:

import axios from 'axios';
import { useLoadStore } from '../stores/loading';
const request = ();
//Request for interception(
  (config) => {
    //Public loading    const loadStore = useLoadStore();
    let statusList = { ... };
    statusList[] = true; //The interface is assigned as request    (statusList);
    if (!) {  //Judge whether loading is being displayed      (true);
    }
    return config;
  },
  (error) => {
    return (error);
  }
)
//Response to intercept(
  (response) => {
    const loadStore = useLoadStore();
    let statusList = { ... };
    statusList[] = false;  /////Interface assignment is completed as request    if (!(statusList).includes(true)) { //Travel over the object and determine whether all interfaces return      if () {
        (false);
        ({});
      }
    } else {
      (statusList);
    }
  }，
  (error) => {//If an interface is reported, reset loading    const loadStore = useLoadStore();
    if () {
      (false);
      ({});
    }
  }
）

Listening state changes

// When listening to the store status value, you need to pass in a functionwatch(()=>,(newValue, oldValue)=>{
  if(newValue){
    showLoadingToast({
      duration: 0,
      forbidClick: true,
    });
  }else{
    closeToast();
  }
})

This is the article about the upgraded version of Vue public loading (response when dealing with concurrent asynchronous differences). This is the end of this article. For more related content of Vue public loading, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!