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

Menu