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

Javascript 如何在Angular 6上处理多个htttp请求,javascript,angular,typescript,rxjs,observable,Javascript,Angular,Typescript,Rxjs,Observable,我有一个函数,它试图将3个请求链接在一起,如下所示: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments(this.currentUser.id) ) ).subscri

我有一个函数,它试图将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中呈现数据


但是我所得到的只是上一次调用的数据,顺便说一句,它返回了一个错误,我如何在不停止这个过程的情况下处理这个错误?提前感谢,我是Angular的新手。

您可以使用forkjoin来处理多个http请求,就像使用RxJs这样:

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
     });
}
从'rxjs/Rx'导入{Observable};
导入“rxjs/add/observable/forkJoin”;
getVehicles():可观察{
const user=this.http.get(user_ENDPOINT.map)(res=>res.json());
const account=this.http.get(account_ENDPOINT.map)(res=>res.json());
constpayment=this.http.get(payment_ENDPOINT.map)(res=>res.json());
返回可观察的forkJoin([用户、帐户、付款])
.map(响应=>{
//响应[0]=>用户
//答复[1]=>帐户
//答复[2]=>付款
});
}

制作此StackBlitz请查看:

{完整页面视图}

需要检查的文件:

  • services>http.service.ts{这包含使用GET的方法 请求}
  • services>users.service.ts{其中包含方法}
  • app.component.ts

在ngOnInit中的app.component.ts文件中,您可以看到我进行的异步调用相当于我现在可以在模板中控制台或使用的某个变量。

您可以存储每个响应的数据,即使它们是异步调用。。。让我告诉你,过一会儿,给我15分钟。你可以使用reduxI,它会非常适合你