for循环的奇怪行为

Question

我有一系列带有货号的产品。

0:"3323"
1:"3319"
2:"3322"
3:"3331"
4:"3309"
5:"3317"
6:"3316"
7:"3329"
8:"3330"
9:"3332"
10:"3324"

我将此数组的每个文章编号传递给服务以获取相应产品的详细信息以显示图像。当我在数组中推送每个产品的图像属性时，每次我在每个索引处获得不同的值。

我希望每篇文章的图像都位于与上述数组相同的索引上。 示例：3323 的图像在新数组的第 0 个索引处。

werbedata: WerbeData[];
produkt: Produkt[];
urls: string[] = [];

  getWerbeData(filialewerbenr) {
    this.werbedataService.getWerbeData(filialewerbenr)
      .then(
        (werbedata) => {
          this.werbedata = werbedata[0];
          this.anums = this.werbedata.ArtNr.split(' ');
          console.log(this.anums);
          for (let i = 1; i < this.anums.length; i++) {
            let articleNumber = this.anums[i];
            this.produktService.getProdukt(articleNumber)
              .then(
                (product) => {
                  this.produkt = product[0];
                  this.urls.push(this.produkt.PfadBild_1);
                }
              );
          }
        },
    )
  }

我在哪里做错了，所以我会在相应的索引中获得相应的产品详细信息？

Answer 1

您可以跟踪所有承诺并等待所有承诺完成。下面的 sn-p 显示了您可以如何执行此操作。

const
  productNumbers = ["3323","3319","3322","3331","3309","3317","3316","3329","3330","3332","3324"];
  
function getWerbeData(id) {
  // Do your webservice call and make sure it returns a promise. This code 
  // will wait between 500ms and 1000ms before returning a fake result.
  console.log(`[${id}] - getting data`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`[${id}] - data received`);
      resolve(`result for ${id}`)
    }, (Math.random() * 500) + 500);
  });
}

const
  // Creates a new array with for each product number a promise.
  promises = productNumbers.map(productNumber => getWerbeData(productNumber));
  
// Wait for all the promises to be resolved and print a log line.
Promise.all(promises)
  .then(() => console.log('all data retrieved'));

Answer 2

一个数组从索引 0 开始。 您的 for 循环以 i = 1 开始。 因此，您总是得到以下物品，而不是您所期望的。

=> for (让 i = 0; i

热烈的问候

更新： 我的错。 您正在迭代数组（同步），但随后您执行异步调用以获取其他数据。 没有保证，第一个调用的异步调用也将是第一个完成的。

所以，最后的顺序很大程度上取决于这个异步调用

 this.produktService.getProdukt(articleNumber)

更新 2： 解决方案是建立一个结果结构。在那里，您必须以正确的顺序交付异步 .getProduct 调用的所有结果。 然后您必须检查所有异步调用是否已完成... 之后，您可以遍历结果结构并以正确的顺序获取数据。

我用 promise 工作了一段时间（我真的很喜欢 rxjs :-)） 因此，将索引信息和计数器传输到 .then 方法中可能会出现问题...

let resultData = [];
let counter = 0;
for (let i = 1; i < this.anums.length; i++) {
        let articleNumber = this.anums[i];
        counter++;
        this.produktService.getProdukt(articleNumber)
          .then(
            (product) => {
              this.produkt = product[0];
              resultData[i] = this.produkt.PfadBild_1;
              counter--;
            }
          );
      }
      // Now wait until counter reaches again 0, than your result structure should be up to date.