当不断添加 Promise 时，当所有 Promise 都已解决时，如何解除加载覆盖

Question

我有以下类，用于路由我的所有 API 请求

class PromiseBroker {
    #promises = {};
    #overlayEle = document.getElementById('loading-overlay');
    constructor(){

    }
    get promises(){
        return this.#promises;
    }
    setPromise(key, value){
        this.promises[key] = value;
        this.#overlayEle.classList.remove('d-none');
        Promise.allSettled(Object.values(this.promises)).then(results => {
            this.#overlayEle.classList.add('d-none')
        });
    }
}

此类的目的是在所有 API 请求完成后关闭加载覆盖。我不知道会提前提出多少请求。我遇到的问题是，随着承诺的增加，它会被过早地取消。这就是我所指的：

1. 添加了 Promise A - 添加了加载覆盖
2. Promise A 解决 - 加载覆盖被取消
3. 添加 Promise B - 添加加载覆盖
4. 添加了Promise C
5. Promise B 解决 - 加载覆盖被取消
6. Promise C 解决了 - 这是我希望解除覆盖层的时候

只有当所有承诺（包括自

allSettled

调用以来添加的承诺）都得到解决时，我才想解除。我假设问题是在等待承诺解决的同时状态发生了变化。我不知道是否有办法取消或覆盖

allSettled

以仅使用最近的通话。

Answer 1

将当前的 Promise 存储在 var 中，在关闭加载覆盖之前检查 Promise 是否仍然相同。

class PromiseBroker {
    #promises = {};
    #overlayEle = document.getElementById('loading-overlay');
  
    get promises() {
        return this.#promises;
    }

    setPromise(key, value) {
        const currentPromises = { ...this.promises }; // copy - important
        currentPromises[key] = value;
        this.#overlayEle.classList.remove('d-none');
        
        Promise.allSettled(Object.values(currentPromises)).then(results => {
            if (currentPromises === this.promises) {
                this.#overlayEle.classList.add('d-none');
            }
        });
        this.#promises = currentPromises; // we can update after the checks
    }
}