Angular firebase 获取单个项目存在竞争条件

Question

我同时使用 angular 和 firebase，我有一个存储在我的根范围中的产品数组，尽管加载这些项目需要时间。

我的问题是，当我直接转到此页面时： http://localhost/product/greyish-sports-shoes

如果我转到主页，产品会在 2 秒后加载.. 然后只有当我点击产品时 link 它才会带我到它，它会工作，因为产品已经已加载。

它转到包含 products 数组的 shoeService，但仍未加载项目，因此它无法通过 slug 找到产品。

这是我在运行方法中使用的代码。

   var ref = firebase.database().ref().child('products');

    $rootScope.shopProds = $firebaseArray(ref);

我的鞋厂：

 function shoeFactory($rootScope) {
    this.service = {};

    this.service.store = new Store($rootScope.shopProds);
    this.service.cart = new Cart();

    return this.service;
}

Answer 1

重要的是要认识到 $firebaseArray 服务 returns 一个最初为空的数组。在从服务器返回数据后异步填充数组。

使用附加到数组的 $loaded 方法返回的承诺：

function shoeFactory($rootScope) {
    this.service = {};

    this.service.storePromise = $rootScope.shopProds.$loaded()
      .then ( (shopProds) => {
         return new Store(shopProds);
    });                   

    this.service.cartPromise = this.service.storePromise
      .then ( () => {
        return new Cart();
    }).catch( (error) => {
        console.log("ERROR in shoeFactory");
        throw error;
    }); 

    return this.service;
}

为避免竞争条件，代码需要使用 promise 来链式操作。

Angular firebase 获取单个项目存在竞争条件

Angular firebase fetching single item has race conditions

angularjs

firebase

angularfire

angular-promise

angularjs-1.6