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
     });
}

Answer 2

使此StackBlitz签出：

https://stackblitz.com/edit/angular-async-calls-httpclient

https://angular-async-calls-httpclient.stackblitz.io {整页视图}

您需要检查的文件：

服务> http.service.ts {这包含使用GET的方法请求}
服务> users.service.ts {这包含方法}
app.component.ts

在ngOnInit的app.component.ts文件中，您可以看到我有一个异步调用，该调用已等效于一些变量，现在可以在模板中对其进行控制台或使用。

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

2 个答案: