Угловая 5 Модель с детскими моделями.Несколько HTTP-запросов

Question

У меня есть структура этой модели

export class Car {
    id: number;
    exterior: Exterior;
    engine: Engine;
}

export class Exterior {
    color: string;
    doors: number;
}

export class Engine {
    model: string;
    horsePower: number;
}

Экстерьер и Engine имеют свои собственные сервисы, называемые ExteriorService и EngineService, например:

@Injectable()
export class ExteriorService {
    constructor(
        private http: HttpClient
    ) { }

    public getExterior(carId: number): Observable<any> {
        return this.http.get(`${url}`)
            .map(response => response);
    }
}

, которые оба добавлены в app.module..ts

Теперь я хочу иметь возможность вызывать один метод из другого компонента getCar(carId: number), который вернет мне полностью заполненный объект Car (включая детей).Затем, после того, как он будет полностью заполнен, я хочу, чтобы console.log смог увидеть все данные, включая детей.

Answer 1

вы можете использовать оператор RxJS forkJoin для объединения результатов различных асинхронных http-вызовов, например,

getCar(carId: number) {
  return 
    forkJoin(
      this.http.get("/api/car/1"),
      this.http.get("/api/exterior/1"),
      this.http.get("/api/engine/1")
    ).pipe(map(parts => {
      const car = parts[0];
      car.exterior = parts[1];
      car.engine = parts[2];
    }));
}

Таким образом, запросы выполняются параллельно и также могут быть отменены.

См https://www.learnrxjs.io/operators/combination/forkjoin.html

Answer 2

Использовать цепочку Подписаться

this.http.get("/api/car/1").subscribe(car => {
  this.http.get("/api/exterior/1").subscribe(exterior => {
    car.exterior = exterior;
    this.http.get("/api/engine/1").subscribe(engine => {
      car.engine = engine;
      this.car = car;
    });
  });
});

Метод 2 MergeMap

this.car = this.http.get('/api/car/1')
.pipe(mergeMap(exterior => this.http.get("/api/exterior/1"))
.pipe(mergeMap(engine => this.http.get("/api/engine/1")));

Метод 3 ForkJoin

let car = this.http.get('/api/car/1');
let exterior = this.http.get('/api/exterior/1');
let engine = this.http.get('/api/engine/1');

forkJoin([car, exterior, engine]).subscribe(data => {    
    data[0].exterior = data[1]
    data[0].engine = data[2];
    this.car = data[0];
  });