页面里有多个遮罩时，如何处理遮罩重叠的现象？

问题现象：

当页面里不同的组件同时加载不同的请求时，如果这些组件此时都有遮罩，那么就会出现遮罩重叠的现象，页面上有多个 loading 动画等，用户体验不太好。

我感觉这个问题不简单，我能想到需要处理的点有：

1. 判断遮罩是否重叠？

2. 请求是异步的，遮罩如何还原到对应的组件？比如当页面全局和页面上某个组件同时生遮罩，那么此时应该是只保留全局遮罩；当全局遮罩对应的请求完成时，假如局部遮罩的请求尚未完成，那么此时局部遮罩应该还原。

我想到的方案：

用的是 axios，所以可以在 axios 拦截器里记录下 http 请求以及对应的 DOM 层级，这里获得 DOM 层级的作用是页面上的组件关联上，以及通过层级判断遮罩是否重叠。

讨教一下大家的好想法。