How to control the global loading for multiple requests on a page

the rendering of a page usually involves multiple requests. When there is only one request, we can control the status of isShowLoading in the interception method of the request, for example:

var isShowLoading = false

service.interceptors.request.use(config => {
  // Do something before request is sent
  isShowLoading = true
  return config
}, error => {
  // Do something with request error
})

service.interceptors.request.use(response => {
  // Do something after request is returned
  isShowLoading = false
  return response
}, error => {
  // Do something with request error
})

what if multiple requests are involved at the same time? Is it to turn isShowLoading into an object, store key-value pairs in the object every time, and turn it off when all values are true? Is there any other way?

Dec.21,2021

A relatively simple way is to change the variable type from boolean to number
request request variable + 1, receive callback variable-1; Loading logic changes to variable non-zero display

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b567-2c29c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b567-2c29c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?