Как сгладить зависимый http-запрос с помощью pipe и map

Question

Мне удалось связать три http-запроса, для которых каждый последующий запрос зависит от результата предыдущего. Как я могу сгладить вложенные трубы и карты в следующем примере?

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

@Component({
  selector: 'app-chain-http-request',
  templateUrl: './chain-http-request.component.html',
  styleUrls: ['./chain-http-request.component.css']
})
export class ChainHttpRequestComponent implements OnInit {
  character: any;
  homeworld: any;
  mostPopularMovie: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http
    .get('https://swapi.co/api/people/1')
    .pipe(map((character: any) => {
      this.character = character;
      this.http
        .get(character.homeworld)
        .pipe(map((homeworld: any) => {
          this.homeworld = homeworld;
          this.http
            .get(homeworld.films[0])
            .pipe(map((mostPopularMovie: any) => {
              this.mostPopularMovie = mostPopularMovie;
              }))
            .subscribe(() => {
              console.log('mostPopularMovie loaded');
            });
          }))
        .subscribe(() => {
          console.log('homeworld loaded');
        });
      }))
    .subscribe(() => {
      console.log('people loaded');
    });
  }
}

Answer 1

если вы хотели упростить ваше утверждение, это должно сработать.

this.http
.get('https://swapi.co/api/people/1')
.pipe(
   tap(character => console.log(character)),
   switchMap((character: any) => this.http.get(character.homeworld)),
   tap(homeworld => console.log(homeworld)),   
   switchMap((homeworld: any) => this.http.get(homeworld.films[0])),
   tap(mostPopularMovie => console.log(mostPopularMovie))
).subscribe();