Promise.all 的 then() 函数在 Promise 完成之前执行 - Ionic/Angular

Question

我第一次使用ionic 设置缓存。代码如下：

listProducts(): Promise < any > {
    let cacheKey = 'products';
    this.cache.removeItem(cacheKey);
    let promises_array:Array<any> = [];
    let results;
    return new Promise((resolve, reject) => {
        this.cache.getItem(cacheKey).catch(() => {
            this.list = this.af.list('/products');
            this.subscription5 = this.list.subscribe(items => {
                for (let x = 0; x < items.length; x++) {
                    promises_array.push(new Promise((resolve, reject) => {
                        console.log(JSON.stringify(items[x].customMetadata) + ":   this is the customdata (((()()()()()");
                        let storageRef = firebase.storage().ref().child('/settings/' + items[x].customMetadata.username + '/profilepicture.png');
                        storageRef.getDownloadURL().then(url => {
                            console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
                            items[x].customMetadata.profilepic = url;
                        }).catch((e) => {
                            console.log("in caught url !!!!!!!$$$$$$$!!");
                            items[x].customMetadata.profilepic = 'assets/blankprof.png';
                        });
                        //this.startAtKey = item.$key;
                        this.productListArray.push(items[x].customMetadata);
                    }));
                };
            })
            results = Promise.all(promises_array);
            results.then(() => {
                //setTimeout(() => {
                console.log(JSON.stringify(this.productListArray) + " value value vlaue productlistarray");
                this.productListArray.reverse();
                return this.cache.saveItem(cacheKey, this.productListArray);
                //}, 3000);
            })
        }).then(data => {
            console.log("Saved data: ", data);
            resolve();
        })
    })
}

基本上console.log(JSON.stringify(this.productListArray) + " value value vlaue productlistarray"); 行打印一个空数组-[]。这个变量中应该有数据，因为代码不应该在所有承诺完成之前执行。你会注意到我有一个setTimeout 被注释掉了——当我评论它时，它起作用了——但这显然不是一个可接受的解决方案，我只是表明它是一个与承诺有关的时间问题。任何帮助都会很棒。

Answer 1

我认为问题出在这一行

this.list.subscribe(items => {

基本上，列表仍然在获取时

console.log(JSON.stringify(this.productListArray) + " value...

正在运行。所以我希望promises_array 是空的（你可以检查一下）。

您可以通过将list（map() 或 flatMap()，需要检查哪个）映射到一个 promise 数组而不是推入单个 promise 来解决这个问题。

我认为这是地图（或 flatMap）代码，但需要测试。请注意，每个缩进级别都需要大量返回。

const promises_array = this.list.map(items => {
  return items.map(item => {
    return new Promise((resolve, reject) => {
      console.log(JSON.stringify(items[x].customMetadata) + ":   this is the customdata (((()()()()()");
      let storageRef = firebase.storage().ref().child('/settings/' + items[x].customMetadata.username + '/profilepicture.png');
      return storageRef.getDownloadURL().then(url => {
        console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
        items[x].customMetadata.profilepic = url;
      }).catch((e) => {
        console.log("in caught url !!!!!!!$$$$$$$!!");
        items[x].customMetadata.profilepic = 'assets/blankprof.png';
      });
      this.productListArray.push(items[x].customMetadata);
    }));    
  })
}
Promise.all(promises_array)
  .then(() => {
    console.log(JSON.stringify(this.productListArray) + " value value vlaue productlistarray");
    this.productListArray.reverse();
    this.cache.saveItem(cacheKey, this.productListArray);
})