Angular 5-使数据异步

Question

我正在使用一些复杂的API，并且可以使用一些帮助。

在那里。 我正在包装中获取重要数据。 每个程序包包含10个程序包，但我需要创建所有程序包的列表

例如。

我正在从其中一个获取数据：['1'，'2'，'3'，'4'，'5'，'1'，'2'，'3'，'4'，'5' ]，然后得到下一个包：['4'，'5'，'1'，'2'，'3'，'1'，'2'，'3'，'4'，'8']和下一个和下一个直到我的状况恢复正常。

所以我用do-while循环来做。 看起来像这样：

do {
  this.getMyDataPart(i).then( result => {
     list = list.concat(result);
     i++;
  });
} while(cool);

getMyData(idofPackege: number): Observable<DataObject> {
  return this.http.get<DataObject>(this.apiURL + idofPackege);
}

问题是我不知道将执行此循环多少次，因此我需要一步一步地执行操作。 经过2个小时的尝试，我不知道该怎么做。

我必须等到结果出现后再决定增加I并获取另一包数据。

Answer 1

做/做是错误的构造。 请改用递归。

list: any[];

ngOnInit() {
  this.list = [];
  myRecursiveFunction(0);
}

myRecursiveFunction(i: number) {
    this.getMyData(i).subscribe(result => {
        this.list = this.list.concat(result);
        if(this.cool) { 
          i++;
          this.myRecursiveFunction(i);
        }
    });
}

getMyData(idofPackege: number): Observable<any[]> {
  return this.http.get<DataObject>(this.apiURL + idofPackege);
}

请注意，我不知道您的变量cool是做什么？

Answer 2

您可以使用Async / await来强制javascript执行以等待异步API调用的返回，如下所示：

async myAsyncFunction() {
    do {
      const parcialList = await this.getMyDataPart(i);
      list = list.concat(parcialList);
      i++;             
   } while(cool);
}   

getMyData(idofPackege: number): Observable<DataObject> {
   return this.http.get<DataObject>(this.apiURL + idofPackege);
}

有关更多信息，请参见以下链接：

https://labs.encoded.io/2016/12/08/asyncawait-with-angular/

https://javascript.info/async-await