javascript - 实现 getOrCreate 方法异步问题

Question

我有一个封装与服务器通信的类它有一个 getOrCreate 方法来在服务器中创建 ShoppingCart 资源(我使用的是 firebase，但我的问题是针对所有类型的服务器实现)

一旦应用程序加载到客户端(我使用的是 Angular ，但对于这个问题来说并不重要)，两个不同的组件(屏幕区域)就会将服务类注入(inject)到它们中(它是一个单例)并且他们调用方法 getOrCreateCart()此方法应检查 localStorage 是否存在 cartId，如果存在则返回它。否则，它应该通过对服务器的异步调用来创建它。问题是，如果两个组件同时调用此方法，由于缺乏锁定机制，我无法阻止第二个操作，直到第一个操作完成，并且第二次从 localStrogate 返回 cartId 而不是创建另一个操作数据库中的资源

检查 cartId 是否已存在于数据库中不是一个选项，因为 cartId 是根据向服务器请求生成的。

一些代码让事情变得更清楚:

private async getOrCreateCartId() {
    let cartId = localStorage.getItem('cartId');
    if (cartId) return cartId;

    let newCartId = await this.create();
    localStorage.setItem('cartId', newCartId);
    return newCartId;
  }

 // Returns a promise with the new created id
 private create() {
    return this.db.list('/shopping-carts/').push({
      dateCreated: new Date().getTime()
    });
  }

Answer 1

感谢 Roamer-1888，我已经弄清楚了

这是我的解决方案:

1. 缓存从 create() 方法返回的 Promise
2. 对于所有后续调用，返回此 Promise，以便当结果从服务器到达时，将调用所有返回的 Promise
3. 在返回 Promise 之前，我调用 then 并将服务器中的值转换为我感兴趣的简单字符串。

我最终得到了这段代码:

private getOrCreateCartId() {
    let cartId = localStorage.getItem('cartId');
    if (cartId) return Promise.resolve(cartId);

    if (this.createPromise) return this.createPromise.then(result => result.key);

    this.createPromise = this.create();
    this.createPromise.then(result => {
      localStorage.setItem('cartId', result.key);
    })
    return this.createPromise.then(result => result.key);
  }