Angular -将多个连续的API调用合并到一个结果中

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="getData()">Get Data</button>
    <div *ngIf="data">{{ data }}</div>
  `,
})
export class ExampleComponent {
  data: any;

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('https://api.example.com/data1')
      .pipe(
        mergeMap((response1: any) => {
          return this.http.get('https://api.example.com/data2');
        }),
        mergeMap((response2: any) => {
          return this.http.get('https://api.example.com/data3');
        })
      )
      .subscribe((response3: any) => {
        this.data = response3;
      });
  }
}