Angular:WAITING加载异步数据的正确方法

Question

我必须进行多次 API 调用(http 请求)才能获取我需要的所有数据。

由于我必须进行 2 个独立的 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>>;

这是我目前用来填写 Array<Type> 的代码:

this.langService.supportedLanguages().subscribe(langs => setTimeout(() =>
  this.langs.push(...langs), 1000));
this.categorieService.getAllFilters('de').subscribe(categories => setTimeout(() => {
  this.categories.push(...categories), 1000));

我猜这不是检索数据的正确方法，但我还没有找到更好的方法(我是 typescript/angular 的新手)。

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

Answer 1

你可以使用

(我正在使用“rxjs”:“^5.5.11”)。

forkJoin

import 'rxjs/add/observable/forkJoin';
import { Observable } from 'rxjs';
import { Subscription } from 'rxjs/Subscription';


/* Multiple Service calls are asynchronism. use forkJoin to group service calls */  
Observable.forkJoin(
  this.supportedLanguages();
  this.getAllFilters()
).subscribe(
    response =>{
      //response[0] is data returned by API supportedLanguages
      //response[1] is data returned by API getAllFilters
    }
    error => console.log("Error: ", error),
    () =>{
      //All the API calls are completed here. Put your code here
      //codes should be executed after the completion of all API calls
    }
)