Angular 角度：等待加载异步数据的正确方法

我必须发出多个API callshttp请求才能获得所需的所有数据

因为我必须进行两个独立的API调用，这两个调用都应该在检索数据时完成，所以我正在尝试同步到该API

我在typescript/angular方面几乎没有经验，无法通过谷歌找到解决方案

以下是我正在进行的API调用签名：

public supportedLanguages(observe?: 'body', reportProgress?: boolean): Observable<Array<string>>;
public getAllFilters(acceptLanguage?: string, observe?: 'body', reportProgress?: boolean): Observable<Array<Filter>>;

我猜这不是检索数据的正确方法，但我还没有找到更好的方法。我对typescript/angular很陌生

等待加载所述数据的正确步骤是什么？

您可以使用

我正在使用rxjs:^5.5.11

分叉连接

你可以用

我正在使用rxjs:^5.5.11

分叉连接

---

您可以从rxjs尝试forkJoin：

forkJoin(
    this.langService.supportedLanguages(),
    this.categorieService.getAllFilters('de'))
)
.subscribe([langs, categories]=>{
  ...
})

---

您可以从rxjs尝试forkJoin：

forkJoin(
    this.langService.supportedLanguages(),
    this.categorieService.getAllFilters('de'))
)
.subscribe([langs, categories]=>{
  ...
})

您可以使用Rxjs 6中的ForkJoin：

或者，您可以将2个API调用放在一个承诺中：

然后你就这样使用它：

recoverData().then(() => {
    // Some code
});

您可以使用Rxjs 6中的ForkJoin：

或者，您可以将2个API调用放在一个承诺中：

然后你就这样使用它：

recoverData().then(() => {
    // Some code
});

---

如果希望在相同的时间调用API并在相同的时间返回，可以使用rxjs中的ForkJoin，请参阅关于

但是如果您想调用第一个api，那么在第一个api完成后，您需要调用第二个api。您可以使用concatMap，请参阅关于，当您的第二个api需要来自第一个api的参数时，可能会使用concatMap

this.langService.supportedLanguages().pipe( 
 concatMap(resultFromApi1 => this.categorieService.getAllFilters('de'))
).subscribe(x => console.log(x)) //x = result from api 2;

我在typescript/angular方面几乎没有经验，但找不到 通过谷歌解决方案

---

你必须尝试不同的方法，因为角度不仅仅是角度。像“rxjs”和其他。。您需要知道您使用了什么库js。小心地使用version，会导致对version和have的角度非常混淆，因为结构编写有点不同

如果您希望在相同的时间调用API并在相同的时间返回，您可以使用rxjs的ForkJoin，请参阅关于

但是如果您想调用第一个api，那么在第一个api完成后，您需要调用第二个api。您可以使用concatMap，请参阅关于，当您的第二个api需要来自第一个api的参数时，可能会使用concatMap

this.langService.supportedLanguages().pipe( 
 concatMap(resultFromApi1 => this.categorieService.getAllFilters('de'))
).subscribe(x => console.log(x)) //x = result from api 2;

我在typescript/angular方面几乎没有经验，但找不到 通过谷歌解决方案

---

你必须尝试不同的方法，因为角度不仅仅是角度。像“rxjs”和其他。。您需要知道您使用了什么库js。小心地使用版本，使角度非常-非常混淆版本，因为结构编写有点不同

您也可以使用async、Wait和Promission的组合。 首先，您必须附加.toPromise到您的服务方法。然后在component.ts文件中添加以下方法

private async fetchData() {
  return await Promise.all([
    this.langService.supportedLanguages();
    this.categoryService.getAllFilters();
  ]).then(res => {
    this.langs.push(res[0]);   //res[0] is data returned by API supportedLanguages
    this.categories.push(res[1]); //res[1] is data returned by API getAllFilters
    this.status = true; // Confirms that now you have all your data back
  }
}

在ngOnInit中调用this.fetchData

---

然后，您可能会有一个状态变量，在返回所有数据后，将其初始化为false，然后设置为true。

您也可以使用async、wait和promission的组合。 首先，您必须附加.toPromise到您的服务方法。然后在component.ts文件中添加以下方法

private async fetchData() {
  return await Promise.all([
    this.langService.supportedLanguages();
    this.categoryService.getAllFilters();
  ]).then(res => {
    this.langs.push(res[0]);   //res[0] is data returned by API supportedLanguages
    this.categories.push(res[1]); //res[1] is data returned by API getAllFilters
    this.status = true; // Confirms that now you have all your data back
  }
}

在ngOnInit中调用this.fetchData

---

然后可能会有一个状态变量，在返回所有数据后将其初始化为false，然后设置为true。

Observable.forkJoin RxJS 5在RxJS 6中更改为just forkJoin Observable.forkJoin RxJS 5在RxJS 6中更改为just forkJoin这太简单了。很好，这很简单。美好的

private async fetchData() {
  return await Promise.all([
    this.langService.supportedLanguages();
    this.categoryService.getAllFilters();
  ]).then(res => {
    this.langs.push(res[0]);   //res[0] is data returned by API supportedLanguages
    this.categories.push(res[1]); //res[1] is data returned by API getAllFilters
    this.status = true; // Confirms that now you have all your data back
  }
}