Angular如何让订阅等待通话完成

Question

插入注意：这个问题与大多数其他与诸如“如何从异步调用返回响应？”之类的问题不同的问题。因为它使用 SUBSCRIBE。据我了解，订阅会告诉它在更改此内容时执行某些操作，因此您不能将代码放入订阅中，因为它只会在更改时运行（这总是为时已晚）。请仅在您了解 Angular、Subscribe 和 HttpClient 的情况下回答。现在我原来的问题：

我有一个问题，我循环遍历一个数组并对数组中的每个项目进行 get 调用。我的问题是所有这些获取请求都是异步发生的，这意味着它们都尝试获取，而之前的获取仍在接收它们的响应。这会导致错误。这是一个粗略的例子：

 this.MyArray = [1, 2, 3, 4, 5];   

 this.MyArray.forEach(element => {
      this.httpClient.get('http...')
      .subscribe(
        (response: any) => {
      })
 )}

如何让 forEach 循环等待调用响应，然后再转到循环中的下一项？我试着看回复，但我就是不明白:(

Answer 1

试试这个

this.totalCount = this.MyArray.length;
this.i=1;

getData(){

 let ob = this.MyArray[this.i-1];

 this.httpClient.get('http...')
      .subscribe(
        (response: any) => {
            this.i++;
             if(this.i <= this.totalCount){
               getData()
             }
      })
}

Answer 2

您可以将数组映射到可观察的流中。然后你可以使用concat操作符来连续执行observables。

import {
  concat
} from 'rxjs/observable/concat';


this.MyArray = [1, 2, 3, 4, 5];

const observables: Observable<any>[] = this.myArray.map(() => this.httpClient.get('http...'));

concat(...observables).subscribe(resp => {
  // handle responses, they will execute one after another,
  //  each waiting for the previous one to finish
})