如何在Angular 6上处理多个htttp请求

Question

我有一个函数试图将3个请求链接在一起,如下所示:

showProfileDetails() {
  this.getUserInfo(this.currentUser.id).pipe(
    mergeMap(e =>
      this.getAccounts(this.currentUser.id)
    ),
    mergeMap(e =>
      this.getPayments(this.currentUser.id)
    )
  ).subscribe(data =>
    console.log('first attempt on observables: ', data)
  )
}

我想要做的是同步地从每个调用中检索数据并将其存储在变量中,这样我就可以在DOM中呈现数据.

但我得到的只是上次调用的数据,btw返回错误,如何在不停止此过程的情况下处理此错误？在此先感谢,我是Angular的新手.

Answer 1

您可以使用forkjoin以这种方式使用RxJs处理多个http请求:

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

getVehicles(): Observable<any> {
  const user = this.http.get(USER_ENDPOINT).map(res => res.json());
  const account = this.http.get(ACCOUNT_ENDPOINT).map(res => res.json());
  const payment = this.http.get(PAYMENT_ENDPOINT).map(res => res.json());

  return Observable.forkJoin([user, account, payment])
     .map(responses => {
        // responses[0] => user
        // responses[1] => account
        // responses[2] => payment
     });
}